基于Yeoman生成的AngularJS项目扫盲篇

Machiel_One

于 2019-11-10 11:22:30 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/Machiel_One/article/details/102994718

版权

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手册

Machiel_One

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于Yeoman生成的AngularJS项目扫盲篇

AngularJS扫盲：一种构建动态web应用的结构化框架，通过扩展HTML的结构解决动态应用和静、动态文档之间的不匹配，比如说ng-directive指令去扩展HTML语法，双向绑定的方式绑定数据到HTML等。Yeoman生成的AngularJS项目的结构分析：应用访问的入口是index.html,其中有几点要注意的：a. ng-app 属性声明所有被其包含的内容都属于这个An...
复制链接

扫一扫