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

AngularJS学习笔记

时间:2015-07-21 12:49:32      阅读:125      评论:0      收藏:0      [点我收藏+]

标签: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

我就曾经在这个地方困扰了很久。

版权声明:本文为博主原创文章,未经博主允许不得转载。

AngularJS学习笔记

标签:angularjs

原文地址:http://blog.csdn.net/gamesdev/article/details/46983483

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