AngularJS基础

一.自定义指令，调用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。