AngularJS学习笔记

页面导航:首页 > 网络编程 > JavaScript > AngularJS学习笔记

AngularJS学习笔记

来源: 作者: 时间:2016-01-22 08:39 【

AngularJS学习笔记最近在学习MEAN框架,其中前端的部分就是AngularJS,AngularJS和以前接触的jQuery不同,它是通过给html添加directive(标记)的方式来增强html的交互能力的,我觉得它的双端绑定做

AngularJS学习笔记

 

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

1、有关Controller

 

 

{{person.name }}

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

Footer

 

 

 

 

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

 

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

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

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

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

2)template;接受的是字符串,模板会被渲染到DOM中的ng-view中。

例子:template:'

Route

'

 

3)templateUrl;和template差不多,只是设置了Url。

 

例子:

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

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

$routeProvider.when('/', {

controller: 'HomeController',

template: '

We are home

'

 

})

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

}]);

 

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

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

controller: 'PeopleController',

template: '

Person show page: {{ name }}
'

 

})

 

在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

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

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<