码迷,mamicode.com
首页 > Web开发 > 详细

angularjs学习笔记--主html&template html&module&template js、模块、控制器、双向数据绑定、过滤器

时间:2017-08-17 22:08:28      阅读:399      评论:0      收藏:0      [点我收藏+]

标签:使用   查找   factory   cal   font   script   asc   orderby   其他   

// Register the `phoneList` component on the `phoneList` module,

angular.

  module(‘phoneList‘).

  component(‘phoneList‘, {...});

 

 

 

// Define the `phonecatApp` module

angular.module(‘phonecatApp‘, [

  // ...which depends on the `phoneList` module

  ‘phoneList‘

]);

 

通过phoneList在定义phonecatApp模块时传递依赖关系数组,AngularJS将使所有注册的实体也phoneList可以使用phonecatApp。

 

依赖注入:一种软件设计模式,用于处理组件如何保持其依赖性。Angularjs注射器子系统负责创建组件,解决其依赖性,并根据请求将其提供给其他组件。

 

工厂方法:定义指令、服务或过滤器时使用出厂功能,工厂方法注册了模块。宣布工厂的推荐方法:

angular.module(‘myModule‘,[]) 
.factory(‘serviceId‘,[‘depService‘,function(depService){ 
 
}]) 
.directive(‘directiveName‘,[‘depService‘,function(depService){ 
 
}]) 
.filter(‘filterName‘,[‘depService‘,function(depService){ 
 
}]);

 

 

模块方法:通过调用config和run方法来指定在模块的配置和运行时

 

 

controller:

(1)

someModule.controller(‘MyController‘,[‘$scope‘,‘dep1‘,‘dep2‘,function($scope,dep1,dep2){
    $scope.aMethod = function(){

    }
}])

 

(2)
<div ng-controller="MyController"> 
    <button ng-click="sayHello()"></button> 
</div> 
 
function MyController($scope,greeter){ 
    $scope.sayHello = function(){ 
        greeter.greet(‘hello world‘); 
    }; 
}

 

 

 

主html文件(index1.html)、template模板html文件(phone-list.template.html)、module文件(app.module.js)、模板html文件对应的js文件(phone-list.component.js)之间的相互关系:

index1.html用于查看界面效果,也可引入定义的组件;phone-list.template.html定义模板的界面及渲染情况;app.module.js用于利用angularjs定义模块;phone-list.component.js用于模板html文件对应的数据模型及组件定义,在相应的模板下定义组件。

 

index1.html文件:

<!DOCTYPE html> 
<html lang="en" ng-app="phonecatApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script src="../angular/angular.js"></script> 
    <script src="../scripts/app.module.js"></script> 
    <script src="phone-list/phone-list.component.js"></script> 
    <!--<script src="../scripts/component1.js"></script>--> 
</head> 
<body> 
   <phone-list></phone-list> 
</body> 
</html>

 

Ps:这里直接引用phone-list.component.js中定义的组件,别忘了对应依赖的文件。组件引入时以phone-list命名法引入。

 

phone-list.template.html模板文件:

<div class="container-fluid"> 
    <div class="row"> 
        <div class="col-md-2"> 
            <!--Sidebar content--> 
            <p> 
                Search: <input ng-model="$ctrl.query" /> 
            </p> 
            <p> 
                Sort by: 
                <select ng-model="$ctrl.orderProp"> 
                    <option value="name">Alphabetical</option> 
                    <option value="age">Newest</option> 
                </select> 
            </p> 
        </div> 
        <div class="col-md-10"> 
            <ul class="phones"> 
                <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query |orderBy:$ctrl.orderProp"> 
                    <span>{{phone.name}}</span> 
                    <p>{{phone.snippet}}</p> 
                    <p>{{phone.age}}</p> 
                </li> 
            </ul> 
        </div> 
    </div> 
</div>

 

Ps:这里是index1文件通过该模板html文件显示的内容。$ctrl是组件的别名。filter是过滤器。可以选择通过name或age属性进行排序。也可以通过name或age属性进行对应查找。

 

app.module.js定义模块文件:

//用来引入需要使用的module文件 
//定义一个phonecatAPP模块 
var phonecatApp = angular.module(‘phonecatApp‘, []);

 

Ps:该文件用于定义或引用各种模块。

 

phone-list.component.js模型文件:

angular.module(‘phonecatApp‘,[]).component(‘phoneList‘,{ 
    templateUrl:‘phone-list/phone-list.template.html‘, 
    controller:function phoneListController(){ 
        this.phones = [ 
            { 
                name:‘Nmas‘, 
                snippet:‘dsaksn dsj saj jsas ds‘, 
                age:1 
            }, 
            { 
                name:‘Dmas‘, 
                snippet:‘saddsaksn dsj saj jsas ds‘, 
                age:2 
            }, 
            { 
                name:‘Amas‘, 
                snippet:‘fredsaksn dsj saj jsas ds‘, 
                age:3 
            } 
        ]; 
        this.orderProp = ‘age‘; 
    } 
});

 

ps:该文件用于定义组件,其templateUrl为对应的模板html文件,其控制器controller定义了对应的数据模型,控制其数据结构。这里的phonecatApp为app.module.js中定义的模块,即在该模块下注册组件phoneList。

 

 

Angularjs过滤器:使用一个管道字符(|)添加到表达式和指令中,可用于转换数据。过滤器有:currency(格式化数字为货币格式)、filter(从数组项中选择一个子集)、lowercase(格式化字符串为小写)、orderBy(根据某个表达式排列数组)、uppercase(格式化字符串为大写)

 

<p>姓名为 {{ lastName | uppercase }}</p>

 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <script src="../angular/angular.js"></script> 
</head> 
<body> 
<div ng-app="myApp" ng-controller="costCtrl"> 
    数量: <input type="number" ng-model="quantity"> 
    价格: <input type="number" ng-model="price">    
    <!--双向数据绑定--> 
    <p>总价 = {{ (quantity * price) | currency }}</p> 
    <!--实现quantity与price的乘积,并利用currency进行格式化,成货币形式--> 
</div> 
<script> 
    var app = angular.module(‘myApp‘, []);//定义名为myApp的模块 
    app.controller(‘costCtrl‘, function($scope) {   //在该模块下定义一个控制器costCtrl,通过构造函数实现 
        $scope.quantity = 1;   //初始化quantity 
        $scope.price = 9.99;   //初始化price 
    }); 
</script> 
</body> 
</html>

 

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <!--<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>--> 
    <script src="../angular/angular.js"></script> 
</head> 
<body> 
<div ng-app="myApp" ng-controller="namesCtrl"> 
    <p>输入过滤内容:</p> 
    <p><input type="text" ng-model="test"></p> 
    <ul> 
        <li ng-repeat="x in names | filter:test | orderBy:‘country‘"> 
            {{ (x.name | uppercase) + ‘, ‘ + x.country }} 
        </li> 
    </ul> 
</div> 
<script>
//利用angular定义名为myApp的模块,并在该模块下定义名为namesCtrl的控制器,通过构造函数实现该控制器,控制器内定义了数据模型,该数据模型为数组形式,其内包含多个对象 
    angular.module(‘myApp‘, []).controller(‘namesCtrl‘, function($scope) { 
        $scope.names = [ 
            {name:‘Jani‘,country:‘Norway‘}, 
            {name:‘Hege‘,country:‘Sweden‘}, 
            {name:‘Kai‘,country:‘Denmark‘} 
        ]; 
    }); 
</script> 
</body> 
</html>

 

自定义过滤器:

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 
<body> 
<div ng-app="myApp" ng-controller="myCtrl"> 
    姓名: {{ msg | reverse }} 
</div> 
 
<script> 
    var app = angular.module(‘myApp‘, []); 
    app.controller(‘myCtrl‘, function($scope) { 
        $scope.msg = "Runoob"; 
    }); 
    app.filter(‘reverse‘, function() { //可以注入依赖 
        return function(text) { 
            return text.split("").reverse().join(""); 
        } 
    }); 
</script> 
</body> 
</html>

 

 

 ps:如有不妥之处,欢迎指出  (2017-8-16)

 

参考 & 感谢 https://docs.angularjs.org/tutorial

                       

 

 

 

 

 

angularjs学习笔记--主html&template html&module&template js、模块、控制器、双向数据绑定、过滤器

标签:使用   查找   factory   cal   font   script   asc   orderby   其他   

原文地址:http://www.cnblogs.com/haimengqingyuan/p/7384592.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!