AngularJS学习笔记

AngularJS学习笔记

       最近在学习MEAN框架，其中前端的部分就是AngularJS，AngularJS和以前接触的jQuery不同，它是通过给html添加directive(标记)的方式来增强html的交互能力的，我觉得它的双端绑定做得很棒，并且能够解耦逻辑和界面，的确是个值得学习的前端框架。

1、有关Controller

<div ng-controller="MyController">

  {{person.name }}

</div>

 

app.controller('MyController',function($scope) {

  $scope.person = {
    name: "Ari Lerner"
  };
});

 

这里的person.name就对应着带底纹的文字。

因为$scope就代表这个MyController中的任意子元素。

 

2、如何书写services？

一般在网站的public文件夹中，新建一个services，它的作用是可以在Controllers中共享数据。它是单例，只被实例化一次。

在services文件夹中建立一个XXX.js，然后写出这些代码：

angular.module('myApp.services', [])

 .factory('githubService', function() {

   var serviceInstance = {};

   // 我们的第一个服务

   return serviceInstance;

  });

 

这个仅仅是一个例子，它并没有做任何事情。

 

可以将其扩展成为github的服务，下面黄色的部分就是新增的，可以看出，这里依赖的$http作局部刷新：

angular.module('myApp.services', [])

 .factory('githubService', ['$http',function($http) {

 

    var doRequest = function(username, path) {
      return $http({
        method: 'JSONP',
        url: 'https://api.github.com/users/' +username + '/' + path + '?callback=JSON_CALLBACK'

      });
    }
    return {
      events: function(username) { returndoRequest(username, 'events'); },

    };
 }]);

 

如何在Controller中添加Services呢？

app.controller('ServiceController',['$scope', 'githubService',

   function($scope, githubService) {

}]);

这种方法，在public/controllers中填写，这样将我们写的githubService导入进来了。

 

3、如何写Routing

路由的作用是我们能够顺利地将后台模板整合到一个View中，达到模块化加载。

通过$routeProvider来实现。

<header>

 <h1>Header</h1>

</header>

<div class="content">

 <div ng-view></div>

</div>

<footer>

 <h5>Footer</h5>

</footer>

 

ng-view指令将告诉$routeProvider在哪里渲染模板。

 

下面主要设置$routeProvider的when函数以及otherwise函数。

when函数的第一个参数是设置路径，可以为/或者是$location.path()；

第二个参数是配置对象，这个对象有包含不同的键：

1）controller；这个controller可以脚本中的某一个controller，也可以是现写的函数，它的函数参数是function ( $scope ) { }

2）template；接受的是字符串，模板会被渲染到DOM中的ng-view中。

例子：template:'<div><h2>Route</h2></div>'

3）templateUrl；和template差不多，只是设置了Url。

 

例子：

angular.module('myApp', []).

config(['$routeProvider',function($routeProvider) {

 $routeProvider.when('/', {

   controller: 'HomeController',

   template: '<h2>We are home</h2>'

  })

 .otherwise({redirectTo: '/'});

}]);

 

如果指定了类似:的路由，那么可以通过Controller来访问到$routeParams。

$routeProvider.when('/person/:id', {

 controller: 'PeopleController',

 template: '<div>Person show page: {{ name }}</div>'

})

 

在PeopleController中，我们检索路由中指定的people的:id

app.controller('PeopleController', function($scope,$routeParams) {

 

// We now have access to the $routeParams

 

// At the route /person/42, our$routeParams will look like:

 

// { id: 42 }

// 应该是

$routeParams.person.id = 42;

});

 

4、经验谈

实际使用的过程中，一个页面以一个Controller为宜。并且Angular变量的初始化不建议在ng-init中完成，而是在controller中完成。

 

5、经验教训

在引用Controller和Service的时候，还需要注意的是

var myApp = angular.module('myApp', []);

代表的是定义myApp，也就是说通过名称“myApp”和依赖[]来创建的一个Angular模块。而

var myApp = angular.module('myApp');

代表的是引用myApp这个模块，和上面的不同。如果尝试两个地方都调用了

var myApp = angular.module('myApp', []);

那么在console就会报错：

Error:$injector:unpr
Unknown Provider
我就曾经在这个地方困扰了很久。