标签:angularjs
最近在学习MEAN框架,其中前端的部分就是AngularJS,AngularJS和以前接触的jQuery不同,它是通过给html添加directive(标记)的方式来增强html的交互能力的,我觉得它的双端绑定做得很棒,并且能够解耦逻辑和界面,的确是个值得学习的前端框架。
<div ng-controller="MyController">
{{person.name }}
</div>
app.controller(‘MyController‘,function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
这里的person.name就对应着带底纹的文字。
因为$scope就代表这个MyController中的任意子元素。
一般在网站的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导入进来了。
路由的作用是我们能够顺利地将后台模板整合到一个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;
});
实际使用的过程中,一个页面以一个Controller为宜。并且Angular变量的初始化不建议在ng-init中完成,而是在controller中完成。
在引用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
原文地址:http://blog.csdn.net/gamesdev/article/details/46983483