zoukankan      html  css  js  c++  java
  • AngularJS_01之基础概述、设计原则及MVC设计模式

    1、AngularJS:
    开源的JS框架,用来开发单一页面应用,以及数据操作频繁的场景;
    2、设计原则:
    ①YAGNI原则:You Aren't Gonna Need It!
    不要写不需要的代码!
    ②KISS原则:Keep It Simple and Stupid!
    代码保持简洁和具有表现力!
    ——语义化标记、注释、变量或者方法的命名、减少嵌套;
    ③DRY原则:Don't Repeat Yourself!
    模块的封装!
    ——提高代码复用率,降低测试难度方便后期的迭代和维护;
    ④high cohesion low coupling:
    高内聚低耦合
    内聚:一个组件内部不同组成部分之间的关系;
    耦合:不同组件之间的关系;
    ⑤SRP原则:Single Responsibility Principle!
    单一责任原则!
    ⑥OCP原则:Open Closed Principle!
    开闭原则!
    ⑦LCP原则:
    最少知识原则!
    3、设计模式:
    ①创建型模式——五种:
    工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式;
    ②结构型模式——七种:
    适配器模式、装饰器模式、代理模式、外观模式、、桥接模式、组合模式、享元模式;
    ③行为模式——十一种:
    策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式;
    4、MVC设计模式——组合型设计模式:
    ①M——model——模型数据;V——view——html视图;C——controller——控制器;
    view接收用户操作,然后通知controller(控制器)中对应的方法,对model(数据)进行操作,反过来更新view(视图);
    5、AngularJS:
    ①开源的基于MVC的JS框架,用于以数据操作为主的SPA应用,其四大特征方便数据处理以及模块方便实现SPA应用;
    ②四大特征:
    a、采用MVC的设计模式:
    符合当前互联网的发展趋势——职责的细分;
    模块化开发——提高代码复用率,降低测试难度,维护方便;
    b、双向数据绑定:
    AngularJS区别于其他框架的重要特性;
    c、依赖注入:
    通过注入某些服务或对象,直接调用;
    d、模块化设计:
    AngularJS框架本身就符合模块化设计,使用框架结合模块、控制器、服务等来实现模块化开发;
    ③使用:
    基础语法:
    {{expression}}:可执行括号中的表达式,将结果输出到innerHTML中;
    ng-app:自动载入并启动ng应用;
    ng-init:初始化数据(变量、对象、数组...);
    * ngApp——用来启动ng应用,同时指定angular应用的作用范围,出了范围ng表达式指令无法被执行,且只允许调用ngApp指令一次;
    ng常用指令:
    ngApp、ngInit、ng-Bind、ngRepeat(让HTML支持循环)、ngIf(让HTML支持选择/判断)、ngShow(true为显示)、ngHide(true为隐藏);
    4、ng的MVC使用:
    ①声明模块:
    var app=angular.module('myApp',['ng']);
    ②注册模块:
    ngApp指令:ng-app="myApp";
    ③声明控制器:
    app.controller('myCtrl',function(){});
    ④使用控制器:
    ngController指令:ng-controller="myCtrl";
    ⑤在控制器的回调函数中,注入$scope对象,指定模型数据:$scope.变量=值;
    ⑥显示:
    {{}}——ng指令:
    $scope作用域控制对象,将模型数据和视图建立联系;
    初始化数据——ngInit:
    $scope对象;
    ⑦指令:
    <ANY ng-XX=''>
    <ANY ng-init="变量名=值;变量名=值..."></ANY>——允许声明变量,双向绑定;
    <ANY ng-bind="表达式"></ANY>——将指定的表达式的值输出为当前元素的innerHTML;
    <ANY ng-repeat="临时变量名 in 对象/数组"></ANY>——为HTML添加循环功能;
    <ANY ng-repeat="(下标变量名,值变量名) in 对象/数组"></ANY>——为HTML添加循环功能;
    <ANY ng-if="表达式"></ANY>——为HTML添加选择功能;
    ng-click、ng-dbclick、ng-focus、ng-blur;
    ⑧注意:
    定义模型数据,必须注入$scope;
    ng-controller所在的标签内部的作用范围,才能识别控制器所声明的变量、方法;

  • 相关阅读:
    [java]struts2 模型驱动 2016-05-01 21:40 702人阅读 评论(19) 收藏
    [CS]C#操作word 2016-04-17 18:30 1506人阅读 评论(35) 收藏
    软件设计 2016-04-03 18:21 1012人阅读 评论(26) 收藏
    sqlite数据库文件导入到sqlserver 2016-03-26 21:55 1292人阅读 评论(1) 收藏
    C/S和B/S交互 2016-03-19 11:27 1275人阅读 评论(30) 收藏
    DESede/CBC/PKCS5Padding
    Gson应用:利用map和list来拼装Json消息
    使用Log4j2,打包后提示ERROR StatusLogger Log4j2 could not find a logging implementation.
    Jinkins定时任务设置
    给Fitnesse添加调用多参数fixture的调用方法
  • 原文地址:https://www.cnblogs.com/Jupiter258/p/6082151.html
Copyright © 2011-2022 走看看