一.自定义指令,调用directive()方法,如:
app.directive('appInfo',function(){
return{
restrict:'E',
scope:{
info:'='
},
templateUrl:
'js/directives/appInfo.html'
};
});
创建了一个名为‘appInfo’的指令,返回一个对象,该对象有三个字段:
(1)restrict字段指明该指令在HTML标签中如何使用,‘E’代表作为一个新的
标签使用;
(2)scope字段指明我们将通过‘info’这一属性值传递信息给指令,‘=’告诉指令
去<app-info>标签中寻找‘info’属性。然后‘info’中的数据就可以被templateURL指定
的模板(template)使用了,如:<app-info info="shutterbugg"></app-info>
其中"shutterbugg"是控制器中定义的数据;
(3)templateURL字段指定一个HTML文件用来展示‘info’中包含的数据。如:<img class="icon" ng-src="{{info.icon}}"/>
<h2 class="title">{{info.title}}</h2>
<p clas="developer">{{info.developer}}</p>
<p class="price">{{info.price|currency}}</p>
二.从服务器读取数据:
1.调用功能factory()方法创建服务(service),如:
app.factory('forecast', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
创建了一个名为‘forecast’的服务,服务需要使用内置的‘$http’从服务器获得数据,
在服务内部,我们用‘$http’构造一个GET请求来请求数据,如果请求成功,则返回数据,
否则返回错误。
2.将服务添加到控制器中,如:app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {
// ...
}]);
3.在控制器内部访问服务数据,如:
forecast.success(function(data) {
$scope.fiveDay = data;
});
三.使用route:
route使我们可以将自定义的控制器(controller),模板(template)与URL配对。
使用$routeProvider定义程序的route,如:
$routeProvider.when('/',{
controller:'HomeController',
templateUrl:'views/home.html'
}).otherwise({
redirectTo:'/'
});
总结
(1)指令是自定义UI组件的方式;
(2)服务是与服务器进行交互的逻辑;
(3)使用Route让你的app含有更多view。