本文深入剖析了AngularJS框架如何通过扩展HTML结构解决动态应用需求，重点介绍了Yeoman生成的项目结构，包括ng-app的应用范围设定、AngularJS脚本引入方式及ng-view指令在动态页面渲染中的作用。
-
AngularJS扫盲：
一种构建动态web应用的结构化框架，通过扩展HTML的结构解决动态应用和静、动态文档之间的不匹配，比如说ng-directive指令去扩展HTML语法，双向绑定的方式绑定数据到HTML等。 -
Yeoman生成的AngularJS项目的结构分析：
应用访问的入口是index.html,其中有几点要注意的：a.
ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是我们
可以在Web应用中嵌套AngularJS应用的原因。只有被具有 ng-app 属性的DOM元素包含的元素才会受AngularJS影响。<body ng-app="angularJsApp">b. 引入
angularJS脚本：（当然也要包括我们自定义的controller.js）<script src="bower_components/angular/angular.js"></script>c. 通过
ng-view的方式，动态扩展页面的显示。ng-view指令用来设置将被路由管理和放置在HTML中的视图的位置。要创建一个布局模板，需要修改HTML以告诉AngularJS把模板渲染到何处。通过将ng-view指令和路由组合到一起，我们可以精确地指定当前路由所对应的模板在DOM中的渲染位置。<div class="container"> <div ng-view=""></div> </div>DOM渲染的位置通过
ng-view指定，通过config方法定义路由：也就是app.js的内容
大概解释一下：当访问url为'../about'时，$routeProvider服务会路由到about.html页面，在ng-view指令处进行页面渲染，controller属性的设置了AboutCtrl控制器会与路由所创建的新作用域关联在一起。另外，在通过grunt启动应用时，还是比较友好的，会提示你对应的错误点。比如说在自定义指令js时，没有在开头加’use strict’,就报warning提示。
在我之前开发的项目当中，由于涉及到多个页面应用的开发，整体设计是将bower_component，style这一类进行公共化抽离出来。其实本质上就是模块化的开发，比如maven project，包含多个maven module。另外项目中，对一些公共的方法也进行了提取封装，在自己的开发过程中，只需要关注自己本身的业务处理，必要时在对特殊的实现方式进行指令(directive)化或服务(service)化。
关于AngualrJS的API方法的使用，可以作为一个手册翻阅学习：AngularJS API手册
扫一扫
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
