Angular（1）

1.设计原则

1.YAGNI 不要把未来需求引入当前工程   2.KISS keep it simple and stupid 语义化标记合理注释符合规定的命名

3.DRY（don‘t repeat youself）不写重复代码善于封装

4.高内聚低耦合

    内聚：一个组件内部，不同部分之间关系耦合不同组件之间的关系

    耦合：不同组件之间的关系

5.SRP 单一责任原则，一个模块实现单一的规则

6.OCP 开闭原则

7.LCP原则最少知识法则

2.设计模式

分为：创建型结构型行为行

单例模型工厂模式其他的自行百度

MVC model 模型数据（变量） View 视图（html css） Control 控制器（js方法等）

适合数据操作比较频繁的应用程序，数据双向绑定，依赖注入，模块化设计 ng 开源的js框架

3.语法

{{表达式}} 在当前位置输出当前表达式的结果，需要ng-app

常用指令：

1.ng-app：指定作用范围载入

2. ng-init初始化变量

3.ng-bind 指令中表达式值输出当前元素的innerHTML中

4.ng-repeat：遍历数组，对象—> 实质上遍历对象实际是结果如果遍历是重复数组加上遍历方式eg:
数组:ng-repeat="m in cas track by $index"
对象:ng-repeat="(key,value) in cas"(得到key和value)
<p ng-init="student={name:'liuyifei',bra:'D'}"></p>

<span ng-repeat="key in student" ng-bind="key"></span>

结果:liuyifeiD

5.ng-if 判断是否在dom中显示还是移除

6.ng-show 是否显示 7.ng-Checked 8.ng-Style 9.ng-Disabled…..

<ANY ng-if=”表达式”> </ANY>

4.模块mvc

声明：angular.module（“mok”,[依赖列表]）

注册：ng-app=“名字”

声明控制器：app.controller（”控制器名字“，方法func）

使用控制器：<ANY ng-controller =”控制器名称”> </ANY>

操作模型数据：$scope定义模型数据建立了模型数据和视图的桥梁
<!DOCTYPE html>

<html ng-app="myapp" lang="en">

<head>

    <meta charset="UTF-8">

    <title>MVCdemo</title>

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

</head>

<body>



<p ng-controller="myCtrl">{{name}}</p>

<script>

    var app = angular.module("myapp", ['ng']);//模块申明

    app.controller('myCtrl', function ($scope) {  //控制器申明 C

        console.log('in myCtrl function');

        $scope.name = "zheng" ;   //模型数据 M

    })

</script>

</body>

</html>

5.一个添加删除的demo

<!DOCTYPE html>

<html lang="en" ng-app="app-module">

<head>

    <meta charset="UTF-8">

    <title>gouwuche </title>

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

</head>

<body ng-controller="ctr">

单价：<input type="text" id="v1">

数量：<input type="text" id="v2">

<button ng-click="add()">添加</button>

<table >

    <thead>

        <tr>

            <th>单价</th>

            <th>数量</th>

            <th>小计</th>

            <th>删除</th>

        </tr>

    </thead>

    <tbody>

        <tr ng-repeat="(key,row) in data">

            <td >{{row.sprice}}</td>

            <td >{{row.num}}</td>

            <td >{{row.sprice*row.num}}</td>

            <td ><button ng-click="ndelete(key)"  target1="key">删除</button></td>

        </tr>

    </tbody>

</table>

<script>

    var app=angular.module("app-module",['ng']);

    app.controller("ctr",function ($scope) {

        $scope.data=[{sprice:3,num:20},{sprice:4,num:20},{sprice:5,num:20},{sprice:6,num:20}];

        $scope.add=function () {

            $scope.data.push({sprice:v1.value,num:v2.value});

            console.log($scope.a);

            console.log($scope.b);

        };

        $scope.ndelete=function (key) {

           $scope.data.splice(key,1);

        };

    });

</script>

</body>

</html>

Angular（1）的更多相关文章

Angular（03）-- lint风格规范和WebStorm小技巧
在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范 ...
Angular（02）-- Angular-CLI命令
声明本系列文章内容梳理自以下来源: Angular 官方中文版教程官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...
Angular（01）-- 架构概览
声明本系列文章内容梳理自以下来源: Angular 官方中文版教程官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...
从flask视角学习angular（一）整体对比
写在前面前端框架完全不懂. 看着angular中文官网的英雄编辑器教程和核心知识,用偷懒的类比法,从flask django的角度记录一下自己对angular的理解. 作为工科的武曲,自己的体会是 ...
Angular（三）
Angular开发者指南(三)数据绑定数据绑定AngularJS应用程序中的数据绑定是模型和视图组件之间的数据的自动同步. AngularJS实现数据绑定的方式可以将模型视为应用程序中的单一来源 ...
Angular（二）
Angular开发者指南(二)概念概述 template(模板):带有附加标记的模板HTMLdirectives(指令):使用自定义属性和元素扩展HTMLmodel(模型):用户在视图中显示的数据 ...
Angular（一）
Angular开发者指南(一)入门介绍什么是AngularAngularJS是动态Web应用程序的结构框架. 它允许您使用HTML作为模板语言,并允许您扩展HTML的语法以清晰,简洁地表达应用程 ...
angular（3）服务 --注入---自定义模块--单页面应用
ng内部,一旦发生值改变操作,如$scope.m=x,就会自动轮询$digest队列,触发指定的$watch,调用其回调函数,然后修改dom树. 干货:https://github.com/xufei ...
Angular（2）
1.自定义指令,直接栗子: note:定义指定是驼峰,2部分前缀+作用,but 调用改驼峰首字母大写处为 (-首字母小写) <!DOCTYPE html><html lang= ...

随机推荐

Python基本时间转换
时间转换 python中处理时间的时候,最常用的就是字符形式与时间戳之间的转换. 把最基本的转换在这里记下来 string -> timestamp import time import dat ...
CSU 1325 莫比乌斯反演
题目大意: 一.有多少个有序数对(x,y)满足1<=x<=A,1<=y<=B,并且gcd(x,y)为p的一个约数: 二.有多少个有序数对(x,y)满足1<=x<=A ...
tomcat 一个项目在本机和办公室以外电脑服务器上搭建出现乱码问题
插入数据库都是???乱码页面浏览之前在本机插入的数据都是正常的修改conf目录下的server.xml文件转义字符集为 GBK 或 UTF-8 utf-8 即添加 URIEncoding= ...
ajax对象属性withCredentials
默认情况下,ajax跨源请求不提供凭据(cookie.HTTP认证及客户端SSL证明等).通过将设置ajax的withCredentials属性设置为true,可以指定某个请求应该发送凭据.如果服务器 ...
在Mac环境下跑汇编
今天汇编作业做到第七章,就想在Mac下跑自己的asm程序,看到了一个很好的教程: http://www.raywenderlich.com/37181/ios-assembly-tutorial 虽然 ...
H.264简介
H.264/MPEG-4 AVC (H.264) 是1995年自MPEG-2视频压缩标准发布以后最新的, 最有前途的视频压缩标准. H.264是由ITU-U和ISO/IEC联合开发组共同开发的最新国际 ...
PyCharm5.0.2最新版破解注册激活码（图文版）
下载PyCharm http://download-cf.jetbrains.com/python/pycharm-professional-5.0.2.exe 安装PyCharm 设置激活服务器 ...
国产AR SDK介绍
说到VR,大家都知道虚拟现实有多火.可是VR之后呢,还有AR.相较于VR,AR的应用意义更加的强大. 相信在不久的将来AR和VR将会融为一体,把现实世界的数据信息完全联通在我们的眼前.这其中的领头羊莫 ...
tensorflow2
# step1 加载包import tensorflow as tf import numpy as np # step2 输入:随机产生数据 # Create 100 phony x, y data ...
Linux为什么卡住了？
导读通过SSH登录Linux服务器时,输完用户名就卡住了,要等待10秒钟才提示密码输入.这究竟是什么原因导致的呢? 10秒钟的时间并不算长,吃个薯片喝口咖啡就过去了.但是作为强迫症患者,我还是容不得 ...

Angular（1）

Angular（1）的更多相关文章

随机推荐

热门专题