• angular基础


    常用的设计原则和设计模式


    1、设计原则(明确)
    ① YANGI(You aren't gonna need it) 不写不需要的代码
    ②KISS(Keep it simple and stupid) 代码越简单越好
    ③DRY(Don't Repeat Yourself)封装代码
    ④高内聚低耦合
    内聚:一个模块内部的不同部分之间的关系
    耦合:不同模块/组件的关系
    ⑤SRP(single responsibility principle) 单一责任原则
    ⑥OCP(open closed principle) 开闭原则
    对扩展开放 对修改关闭
    ⑦LCP(least knownledge principle) 最少知识法则


    2、设计模式()
    总体来说设计模式分为三大类:

    ①创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

    ②结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

    ③行为型模式,共十一种:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。

    MVC:--》终极目标:模块化和复用


    Model(模型数据)、View(视图)、Controller(控制器)

    工作原理:当对视图操作的时候,触发控制器中的一些方法,在这些方法中对于数据的增删改查的操作,借助一些绑定显示,更新到视图。


    认识AngularJS

    四大特征:
    ①采用了MVC的设计模式
    ②双向数据绑定
    ③依赖注入
    ④模块化设计


    怎么使用?
    引入对应的js文件。

    <script src="js/angular.js"></script>

    
    

    表达式
    语法:{{表达式}}
    作用:将表达式的结果输出到调用该表达式的元素的innerHTML

    
    

    指令
    ngApp指令:①指定angularJS的作用范围②自动载入并启动ng应用

    <div ng-controller="myCtrl">
    <input type="checkbox" ng-checked="checked">是否同意
    </div>

    ngApp指令ng应用的作用范围,如果ngApp调用了多次,只有第一次是生效的。

    ng常用的指令

    ng中的指令:是由AngularJS提供的,可以将指令用在HTML中作为扩展属性、扩展标签

    扩展属性用法:<ANY ng-xx=""></ANY>
    扩展标签用法:<ngView></ngView>

    1、ngBind
    用法: <ANY ng-bind=“”></ANY>
    双花括号 -》表达式的结果输出到调用元素的innerHTML中。
    ngBind 将表达式的结果输出到调用元素的innerHTML中,但是相对于{{}},解决在ng启动较慢时,{{}}闪烁的问题。

    2、ngRepeat指令
    为HTML添加循环功能
    语法1:<ANY ng-repeat="临时变量 in 集合"></ANY>
    语法2:<ANY ng-repeat="(下标变量名,值变量名) in 集合"></ANY>

    用途:对于指定的集合的每个成员,依次赋值给临时变量,将当前元素循环输出一遍。

    $index/$first/$middle...

    3、ngIf指令
    为HTML添加选择功能
    语法:<ANY ng-if="表达式"></ANY>
    用途:表达式的结果为true,当前元素会挂到DOM树,否则删除。

    4、ngShow/ngHide

    语法:<ANY ng-show="表达式"></ANY>
    用途:根据表达式输出结果,true-》显示 false-》隐藏


    语法:<ANY ng-hide="表达式"></ANY>
    用途:根据表达式输出结果,true-》隐藏 false-》显示

    5、ngSrc
    语法:<img ng-src='{{url}}'/>

    6、事件:

    单击事件 ngClick--》 <button ng-click='show()'></button>
    ngDblClick
    ngMouseEnter/Leave...

    两种方法:①ngInit 耦合度比较高 ②$scope
    初始化模型数据:通过控制器的$scope来实现。

    7.ngDisabled

    语法:<ANY ng-Disabled="表达式"></ANY>

    用途:按钮是否可用

    8.ngChecked

    语法:<ANY ng-checked="表达式"></ANY>

    用途:按钮是否选中

    9、ngStyle/ngClass...


  • 相关阅读:
    第一讲小结(位运算)
    新学期开始
    前缀表达式-怎样用空格分隔一个字符串
    计概期末前的小小总结
    动规作业-求数组不相邻元素之和的最大值
    网格-递归作业2-放苹果问题
    1025 数的划分(搜索和递推方法)
    网格-递归作业 集合里的乘法
    网格-递归作业 城堡问题
    去先导零的一个大坑
  • 原文地址:https://www.cnblogs.com/liangfc/p/7529179.html
Copyright © 2020-2023  润新知