Angular - 基本属性&&功能

什么是AngularJs

AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。
AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。

AngularJS特性核心

模块化
双向数据绑定
语义化标签
依赖注入等

Angular下载方式

官网下载直接点击跳转
通过npm下载
命令为:npm install angular
通过bower下载
命令为:bower install angular

MVVM模式

图解

MVC

MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成.
用一种业务逻辑,数据,界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面.在改进和个性化定制界面及用户交互的同时不需要重新编写业务逻辑.
采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。
M模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。
V视图（View）一般用来展示数据，比如通过HTML展示。
C控制器（Controller）一般用做连接模型和视图的桥梁。
MVC更多应用在后端开发程序里，后被引入到前端开发中，由于受到前端技术的限制便有了一些细节的调整，进而出现了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV*等。

图解

Angular基本步骤

如果你发现自己写的代码没有任何反应那就说明,你可能是没有绑定模块和控制器
示例代码:

    // 1.导入文件 
<script src="js/angular.js"></script>
<script>
    // 2.创建模块
    var app = angular.module('app', []);
    // 3.创建控制器
    app.controller('myController', ['$scope', function ($scope) {
        $scope.name = 'aaa';
        $scope.age = 10;
    }]);
</script>
<!-- 4.绑定模块 -->
<body ng-app="app">
    <!-- 5.绑定控制器 -->
    <input type="text" ng-model="msg">
    <h1>{{msg}}</h1>
</body>

内置指令

HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

示例代码:

< ! ———- HTML ———– >

// 一般模块和控制器都绑定给body,实际开发中根据需求来
<body ng-app="app" ng-controller="dataController">
    <!-- ng-show 控制标签是否显示隐藏 -->
    
    // 标签依然存在在页面 只是隐藏 相当于给它设置了display为none
    // 1.第一种写法
    <p ng-show="isShow">isShow 控制标签是否显示</p>
    // 2.第二种写法
    <p ng-show="false">isShow 控制标签是否显示</p>
    
    
    <!-- ng-hide 控制标签是否显示隐藏 -->
    <!--标签依然存在在页面 只是隐藏 相当于给它设置了display为none -->
    <p ng-hide="false">isShow 控制标签是否显示</p>
   
    
    <!-- ng-if 控制标签是否存在 取值布尔值 -->
    <!-- 标签不会存在在页面 相当于注释掉了 -->
    <p ng-if="false">ng-if 控制标签是否存在</p>
    
    
    <!--
    img ng-src 不发送请求 回头再执行一次 
    img src 执行时 会现发送请求 如果路径里面写的是ng的值 就是出现404报错信息
    img ng-src 不会先发送请求 会回头再来执行一次路径
    {{ 两个大括号是插值语法 }}
    -->
    ![]({{path}})
    ![]({{path}})
    
    <!-- ng-class ng-style 控制样式 -->
    <p ng-class="{red:isRed,fz50:true}">{{name}}</p>
    <p ng-style="ctrSty">{{name}}</p>
</body>

< ! ——— Style ————— >

<style>
    .red {
        color: goldenrod;
    }
    .fz50 {
        font-size: 50px;
    }
</style>

< ! ——— JavaScript ——- >

<script src="js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('dataController', ['$scope', function ($scope) {
        $scope.name = '惊鸿一样短暂,夏花一样绚丽';
        // 在模型上绑定数据 1为真 0为假 也可以写成true或者false
        $scope.isShow = 1;
        // 插入图片
        $scope.path = 'atom-transfer.gif';
        // 控制样式
        $scope.isRed = 1;
        $scope.ctrSty = {
            color: 'red',
        }
    }]);
</script>

ng-include

ng-include:开发中我们需要把一个模块单独写到一个页面当中,以便复用
原生HTMl是没法办到的,一般需要通过服务器来完成这个功能
本质是发送了一个Ajax请求把请求的结果放到对应的标签里面

示例代码:

// 同级目录下需要创建head\body\footer的html文件引入才行
<div ng-include="'./04-head.html'"></div>
<div ng-include="'./04-body.html'"></div>
<div ng-include="'./04-footer.html'"></div>
<script src="js/angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('dataController',['$scope',function ($scope) {
    }]);
</script>

图解 —> 你会发现在页面上多了三个复用模块

表单指令

示例代码:

< ! ———- HTML ———– >

<!-- ng-disabled 控制表单是否可用 -->
<input type="text" ng-disabled="true">
<!-- ng-readonly 控制表单为只读属性 -->
<input type="text" value="默认值" ng-readonly="true">
<!-- ng-checked 设置复选框选中状态 -->
<input type="checkbox" ng-checked="isCheck">

< ! ——— JavaScript ——- >

<script src="js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('dataController', ['$scope', function ($scope) {
        $scope.isCheck = true;
    }]);
</script>

ng-switch指令

示例代码:

<body ng-app="app" ng-controller="dataController">
<ul>
    <!--
        遍历 ng-repeat
        筛选对象 匹配就显示 否则隐藏 ng-switch-when
    -->
    <li ng-repeat="value in course" ng-switch="value">
        <!-- 对{{value}}进行判断 when就是条件 满足就显示 否则隐藏 -->
        <p ng-switch-when="html">{{value}}</p>
    </li>
</ul>
<script src="js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('dataController', ['$scope', function ($scope) {
        $scope.course = ['html', 'css', 'js'];
    }]);
</script>
</body>

数据单向绑定

单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，如之前所学的artTemplate 模板引擎的工作方式。

<body ng-app="app" ng-controller="dataController">
<ul>
        <!-- 
        把模型的数据 展示到视图当中
        1.加载时会造成闪烁 解决办法 使用ng-cloak 但是还是会闪烁,所以不建议使用这种
        -->
        <li ng-cloak>{{name}}{{age}}</li>
        <!--
        2.使用ng-bind 不会造成闪烁 但是只可以绑定一个值
        -->
        <<li ng-bind="name"></li>
        <!--
        3.使用ng-bind-template 不会造成闪烁 可以绑定多个值
        -->
        <li ng-bind-template="{{name}} {{age}}"></li>
</ul>
<script src="js/angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('dataController',['$scope',function ($scope) {
        $scope.name = 'xxxxxxxxxxxxxxxxx';
        $scope.age = 2000000000000000000;
    }]);
</script>
</body>

数据双向绑定

数据双向绑定：
模型中的数据可以绑定到视图中
视图中的数据也可以绑定到模型中
想要将视图的数据绑定到模型当中必须借助表单标签

<body ng-app="app" ng-controller="dataController">
<!--
    模型的数据绑定到视图当中 用ng-bind
    <h1 ng-bind="name"></h1>
-->
<!-- 视图绑定到模型 借助表单 绑定ng-model -->
<input type="text" ng-model="userName">
<input type="password" ng-model="pwd">
<!-- 监听点击按钮时 实现绑定 -->
<button ng-click="login()">登录</button>
<script src="js/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('dataController', ['$scope', function ($scope) {
        // 模型当中定义name属性
        $scope.name = '登录'
        // 事件绑定
        $scope.login = function () {
            // 点击时可以直接打印视图绑定到模型当中的数据
            console.log($scope.userName + '---------' + $scope.pwd);
        }
    }]);
</script>
</body>

事件处理

<body ng-app="app" ng-controller="dataController">
<!-- 单击事件 ng-click="click($event,p)"-->
<button ng-click="click()">点我</button>
<!-- 双击事件 ng-dbclick="dbclick('dbl)"-->
<button ng-dblclick="dblclick()">双击</button>
<!-- 鼠标移入 ng-mouseEnter="mouseEnter('进入')"-->
<button ng-mouseenter="mouseEnter()">进入</button>
<script src="js/angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('dataController',['$scope',function ($scope) {
        $scope.click = function () {
            console.log('单击');
        }
        $scope.dblclick = function () {
            console.log('双击');
        }
        $scope.mouseEnter = function () {
            console.log('鼠标进入');
        }
    }]);
</script>
</body>

更多内容 ! 请移步本人博客 ! 点击跳转

什么是AngularJs

AngularJS特性核心

Angular下载方式

MVVM模式

MVC

Angular基本步骤

内置指令

示例代码:

< ! ———- HTML ———– >

< ! ——— Style ————— >

< ! ——— JavaScript ——- >

ng-include

表单指令

< ! ———- HTML ———– >

< ! ——— JavaScript ——- >

ng-switch指令

数据单向绑定

数据双向绑定

事件处理