Angular.js 学习笔记 Day-1

原创 easa 随笔 Angular.js 303阅读 2017-05-31 23:24:09 举报

Angular.js[/color] 跟Jquery有些相似 都是一个框架

使用方式都是<script>引入
angular.js 1.X 侧重数据管理
数据和逻辑驱动为核心

一:使用angular步骤:[color=#ff0000][/color]

       1.引入框架
       2.声明 那一块用 angular  ng-app
       3.ng-model = msg 简单色数据绑定
       4.应用{{msg}}

html 代码

AngularJS核心特性1---MVC (面试必考)
module view controller 开发模式
m 代表模型 module 数据处理,一般指数据库的操作
类 模型
{a:ds f====> a
b:sfsf ===> b
c:grew}===> c

v 代表页面渲染 view  即指 html+css 页面处理
c 代表控制器   controller      用于模型和视图交互

更合理的组织代码    逻辑更加清晰    降低了代码之间的耦合度
                                    高耦合:a依赖与b,a不能使用
                                    低耦合:a在没有b的情况下也可以运行自己逻辑

html 代码

MVVM 弱化了控制器 ng-repeat (循环)
html 代码

MVP 页面中直接去调用
html 代码

二:核心---模块化[color=#ff0000]

    双向数据绑定  ng-model
    语义化标签
    依赖注入  数据对象模型

html 代码

1.声明模块 ng-app="模块名"
声明控制器 ng-controller
2.angular.module('模块名',[依赖其它模块]) 定义模块
3.定义控制器 $scope 数据对象模型
app.controller('控制器名字',[$scope,function($scope){
处理页面交互逻辑
}])
4.数据处理
循环处理 ng-repeat = 'stu in stus'(谁循环 放谁那)
ng-controller = "ctrl"
app.controller('ctrl'[$scope,function($scope){推断式依赖注入}])
很多有情况无法使用
在代码压缩的时候依赖会被解除
app.controller('ctrl'[$scope,function(){行内式依赖注入}])

三:指令[/color]

   书写方式     ng-
1.内置指令:
ng-app    指定那个模块
ng-controller    指定控制器 
ng-bind      数据绑定
ng-show       控制元素是否显示  true显示   false  不显示
ng-hide  控制元素是否隐藏     true隐藏   false  不隐藏
ng-if          控制元素是否"存在"(与if相同)
ng-src         增强图片路径
ng-class       控制类名
ng-include     引入模板   在服务器下运作
ng-disabled    表单禁用
ng-readonly    只读
ng-checked     选中
ng-selected    下拉框
ng-src         图片加载
ng-href         链接地址  引入外部文件

html 代码

2.自定义指令

1.var app = angular.module('模块名',[依赖其它模块]) 定义模块
2.directive去自定义指令
app.directive('指令名',function(){
返回指令对象
return {
1.指定自定义标签的类型
E A C M
E element 标签
A attribute 属性
C class 类
M mark 标记
restrict:'EACM'
2.是否替换原有标签
replace:true(一般都选择)
3.指令模块 依托于谁
template:'<h1>hello world</h1>'
4.指令模块的外部模板 在服务器下运作
templateUrl:"test.html"
}
})
html 代码

[color=#ff0000]3.数据绑定#####[/color][color=#000000]
单项数据绑定 template(单向) 一次性绑定
View
/// \\\
template model
单项数据绑定,数据渲染到试图。然后在DOM中显示,不会改变
双向数据绑定 ng-bind
template

            |||
            view
        //        \\

        ||         ||
         \\       //
            model

双向数据绑定:中间有监听事件,监听数据的变换,数据改变,view发生改变

P.S.第一次写还不太熟练,请大家多多见谅,不足希望大家提出建议,共同进步

评论 ( 2 )
最新评论
easa 1F 2017-06-01 10:00:29 2F

谢谢啦,已经改正

peixiaoliang 2017-06-01 08:37:46 1F

是控制器不是冬至器