AngularJs_day1
2017-01-24 15:26:11 0 举报AI智能生成
在”AngularJs_day1”中，我们开始探索了AngularJS这一强大的JavaScript框架。首先，我们了解了AngularJS的基本概念和结构，包括模块、控制器、服务和视图。接下来，我们学习了如何使用AngularJS的指令来操作DOM元素，如ng-app、ng-controller、ng-model等。此外，我们还探讨了AngularJS的数据绑定功能，以及如何使用表达式和过滤器来处理数据。在这一天的学习中，我们还尝试了一些实际案例，如创建一个简单的待办事项列表应用。通过这些实践，我们对AngularJS有了更深入的了解，为接下来的学习和项目开发奠定了基础。
作者其他创作
大纲/内容
day1
设计原则与模式
设计原则
拙劣的设计
分支主题
7大设计原则
YAGNI--不写不需要的代码
KISS--代码越简单越好，比如语义化的标记、减少HTML中<div>的嵌套
Keep It Simple And Stupid
保持简单和一目了然（傻瓜式），代码要简单，把复杂的逻辑用简单的代码展示出来，
一目了然，加上必要的注释，对函数、变量合理命名，并将代码合理组织。
DRY--不要Ctrl+C/V，使用封装和重用
Don’t Repeat Yourself
不要重复自己，换言之，就是不写重复的代码，如果你的代码中出现大量的重复代码，那么就是时候来将重复的代码进行封装从而实现代码的复用
High Cohesion，Low Coupling---高内聚，低耦合
内聚：一个组件内的不同部分间的关系；耦合：两个组件间的关系
SRP--单一责任原则
分支主题
分支主题
OCP--对扩展开放，对于修改关闭
分支主题
LCP迪米特法则/最少知识法则--封装的功能单位要小，只与自己相关
分支主题
设计模式
工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式
适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式
策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
angualrJS
诞生于09年，后被Google收购，是一个JS框架，适用于以数据操作为主的 SPA（single page application）应用，实现数据的增删改查等操作
四大特性：
使用MVC模式（不再使用原生dom操作、jquery操作）
model
数据
view
显示
controller
对数据进行增删改查
双向数据绑定
依赖注入
模块化设计
表达式和指令
表达式
语法：{{表达式}}
作用：在当前位置“输出”表达式的值
指令
是由AngularJS提供的，可以用在HTML中的一些扩展属性、扩展标签
ngApp指令
使用这个指令自动载入启动一个AngularJS应用。
ngApp指令设计为应用的根元素，一般把它放在页面的根元素附近，
例如<body>或<html>标签。
ngInit指令
ng-init指令允许声明变量，需要注意：为双向绑定。
用法：<ANYng-init=”变量名=值；变量名=值;…”></ANY>
提示：ng-init声明变量时，无需写var关键字，多个变量赋值表达式用分号分开。
ngBind指令
ngBind指令将制定的表达式的值输出为当前元素的innerHTML
用法：<ANY ng-bind=”表达式”></ANY>
ngRepeat指令
ngRepeat指令为HTML添加循环功能
语法：<ANY ng-repeat=”临时变量名 in 对象或者数组”></ANY>
ngIf指令
ngIf指令为HTML添加选择功能
语法：<ANY ng-if=”表达式”></ANY>
用途：当表达式为true时，当前元素会挂到DOM树上，否则会删除
其他指令
ngShow/ngHide/ngSrc/ngChecked/ngDisabled/ngClass/ngStyle/ngClick/ngDblClick...
ng的MVC使用
MVC
Model
为了呈现数据，必须先声明model。
创建model时，可以使用ngInit指令，
但是，这种情况下，数据和显示混在在一起，因此，建议使用controller来声明模型数据。
View
View 就是使用各种表达式和指令来显示内容。
Controller
将各种控制器按照类别和功能进行分类，即按照模块进行划分，即模块化设计
使用步骤
声明自定义的模块：angular.module(‘模块名’，[依赖列表])
注册模块：将自定义的模块注册给当前应用，如：<html ng-app=”模块名”>
声明控制器：在模块中声明控制器函数，如： module.controller('控制器名’,function(){…})
调用控制器：调用控制器的函数，创建控制器对象，如：<ANY ng-controller=”控制器名称” />
操作：在控制器中增删改查Model数据：$scope.变量名 = 值；
显示：在View中呈现model数据 ：{{变量名}}
demo
分支主题
0 条评论
下一页
