Angular快速入门(一)
2016-10-10 13:54
162 查看
Angular快速入门(一)
这篇博客将介绍路由、MVVM、工厂、$resource、控制器、视图、指令、作用域等基本概念。路由
.state('app.serve2',{ url:'/serve2/{fold}', templateUrl:'app/serve2/serve2.html', controller:'serve2Ctrl', resolve : { deps : ['$ocLazyLoad', function($ocLazyLoad){ return $ocLazyLoad.load(['app/product/product.js','app/serve2/serve2.js','app/serve2/modal.js']); } ] } })
一个路由函数接受两个参数,一个是路由名称,一个是路由配置对象。
参数一,String,路由名是代码中控制页面状态跳转的唯一标识。
参数二,object,配置了路由的基本属性。包括url,controller,templateUrl,resolve等
url是该状态下浏览器的路径显示
templateUrl代表视图
controller代表控制器(也可以在视图中配置)
resolve还是一个对象,当中的内容可以在控制器中进行注入。
MVVM
以数据作为驱动,Angular中的factory、service均可理解为数据模型。controller是控制器,控制视图的显示。template为视图。工厂
语法:angular.moudle('appName').factory('name',['inject1','inject2',function(a,b){ return {}; }]);
注意上面代码中存在的对象和函数。
angular.module(‘appName’),该函数在注册表中找一个名字为‘appName’的Angular模块,作为返回对象。
factory(‘name’,[])是一个模块对象的工厂注册函数。注册工厂的目的是为了在控制器或者其他模块中使用,提供数据等等。
[]是factory中的第二个参数,这是Angular中依赖注入的规范,在上面的例子中,function(a,b)是工厂‘name’的构造函数,在工厂被注入时,该构造函数都会被执行一遍。并将返回的对象作为注入值。
在函数体中,我们可以写我们自己的逻辑,比如。
app.factory("product1",['$resource',function($resource){ return $resource('/apis/product1/:id',{id:'@id'}); }]);
在上面的代码中我们利用了$resource返回了一个product1的资源对象。我们在写controller的时候,注入‘product1’,就可以使用query、get等RESTFUL风格的后台访问方法。
注意‘product1’这个字符串,这是angular注入机制的标识。是angular大厦的基石。
$resource
语法$resource(url, [paramDefaults], [actions], options);
这里的url还可以更灵活,使用’:’完成路径传参的工作。
接下来的对象参数还可以配置默认的路径参数。如果使用了@,则说明该参数要从请求中获得。
resource官方文档
控制器、视图
$controller(constructor, locals, [bindings]);
和factory的定义基本相同。但是要注意他在MVVM中扮演的角色:控制器。
在路由中已经有过例子了。标准的路由,会配置一个控制器和一个视图。视图根据控制器中的数据来进行显示。这数据可能来自作用域scope,也可能直接来自controller对象。
先不说细节,给一个评价,控制器和视图是MVVM的终极目标,所做的一切工作都是为它们而服务的。
现在,你应该认识到问题的重点就在这。Angular的终极目标也就是完成控制器和视图的编写。
指令、作用域
我只会介绍一些常用的,帮助理解概念的东西。用法举例:
app.directive('name',['inject1',function(a){ return { restrict : '[A|E|C]', templateUrl : '', replace :[true|false], controller:['',function(){}] } scope :[{}|false] }]);
注入的机制和前面一样。
这里我主要讲一下scope选项,当scope为false时,表示作用域继承于父作用域(scope),也就是调用该指令所在的视图的scope。也就是说,子控制器和上层控制器的作用域共享了。这样写视图就方便多了。
否则指令的scope就是独立的。评价一句,至今没有发现独立作用域的任何优点!
相关文章推荐
- angular.js快速入门 hello world
- 转载几篇 Angular2 快速入门博文
- Angular入门(二)快速入门
- Angular 5 快速入门与提高
- Angular 2 - 5 分钟快速入门
- (一)Angular 快速入门
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
- Angular 4 指令快速入门教程
- Angular2快速入门-2.创建一个新闻列表
- Angular2 快速入门 之 环境搭建
- Angular快速入门2 ---控制器(controller)
- AngularJS入门之如何快速上手(详细讲解什么是angular)
- Angular2.x环境搭建快速入门--最简单教程
- Angular快速入门--路由篇
- Angular2入门——(1)快速上手
- AngularJS入门之如何快速上手(详细讲解什么是angular)
- Angular快速入门4---组件化入门篇1
- Angular 5 快速入门与提高
- Angular2快速入门-4.创建一个服务(创建NewsService提供数据)