AngularJs简介

来源：互联网发布：最新编程语言排行编辑：程序博客网时间：2024/06/06 09:16

一、什么是AngularJs

1、一款非常优秀的前端高级JS的框架
JQuery算不上一个框架，jQuery属于一个工具库
AngularJs包含我们构建web应用程序所需要的各种解决方案，模板，路由，MVC。
由MisKo Hevery等人创建
2009年被Google收购，有专门的团队维护
通过angularJs就可以轻松构建SPA（单页面运用程序）程序，能给用户带来体验上的提升
通过指令扩展了HTML，通过表达式绑定数据到HTML
2、提供的功能
1）MVC思想的设计
2）模块化
3）自动化双向数据绑定
4）指令系统（非侵入式API）
3、为什么学AngularJs
对比一下代码：以前我们写的代码

<DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"></head>    <body>        <input type="text" id="value">        <input type="button" value="*2" id="btn">    </body>    <script>        (function (window)        {            window.document.querySelector("#btn").addEventListener("click", function()            {                var inp = window.document.querySelector("#value");                var value = inp.value;                value = value - 0;                value = value * 2;                inp.value = value;            });        })(window);    </script></html>

使用AngularJs改进以上代码的过程：
Angular JS起步
Angular JS是JavaScript框架，所以你可以通过以下两种方式载入到项目中
1.NPM
npm install angular
2.Brower
bower install angular#1..4.8
2.下载Angular.js的包
http://github.com/angular/angular.js/releases
3.使用CDN上的Angular.js
http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js
4、Angularjs初体验
4.1、ng-app指令和ng-controller指令不能在同一层dom0对象上
4.2、ng-app指令的作用就是声明当前dom被angularJs这个库中定义的一个模块所托管

<!DOCTYPE html><html lang="en" ng-app="myApp" ><head><meta charset="UTF-8"><title>AngularJs体验</title></head><body ng-controller="DemoController">    <input type="text" id="value" ng-model="value"/>    <input type="button" value="*2" id="btn" ng-click="doCalc()"/>    <script src="node_modules/angular/angular.js"></script>    <script>    (function(window)    {        //此处的代码不会污染全局作用域        var myApp= window.angular.module('myApp', []);        myApp.controller('DemoController', function($scope)        {            $scope.value = 0;            $scope.doCalc = function()            {                $scope.value = $scope.value*2;            }        });    }(window));    </script></body></html>

5、AngularJs的数据绑定

<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>TODOMVC-AngularJs</title></head><body >    <div ng-app ng-init="name='zhangsan'">        <p>在输入框中尝试输入</p>        <p>            <input type="text" ng-model="name">        </p>        <p>{{name}}</p>    </div>    <script src="node_modules/angular/angular.js"></script>    <!--        1.网页加载完成后，angular.js这个脚本就会自动执行；        2.执行过程主要是去界面上找到ng-app,该指令标识当前元素被angular管理    --></body></html>

6、AngularJs小案例
App.js中的代码：

/* *@Authior:guoshijiang *@Date: 2016-5-27 *@Last Modified by: iceStone *@Last Modified time: 2016-12-17 19:09 */(function (window){    window.angular.module('TodoApp', []);    window.angular.module('TodoApp').controller('MainController', ['$scope', function($scope)    {        $scope.text = ' ';        $scope.todoList=        [{            text:'学习angularjs基础',            done:false        },{            text:'学习React基础',            done:false        }];         $scope.add=function()         {            var text=$scope.text.trim();            if(text)            {                $scope.todoList.push({                    text:text,                    done:false                });                    $scope.text='';            }         }        $scope.delete = function(todo)        {            var index = $scope.todoList.indexOf(todo);            $scope.todoList.splice(index, 1);        };        $scope.doneCount=function()        {            var temp = $scope.todoList.filter(function (item)            {                return item.done;            });            return temp.length;        };    }]);}(window));

Html中的代码：

<!DOCTYPE html><html><head><title>AngularJs案例</title><meta charset="UTF-8"><meta name=”viewport” content=”width=device-width,initial-scale=1”><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"><script src="bootstrap/js/jquery.min.js"></script><script src="bootstrap/js/bootstrap.min.js"></script><style type="text/css">.checkbox{    margin-bottom: 0;    margin-right:20px;}.done{    color: #ccc;}.done > .checkbox > label > span{    text-decoration:line-through;}</style></head><body style="padding:50px; background-color:#ccc" class="container" ng-app="TodoApp"><div class="container" style="padding:50px; background-color:#fff" ><header><h1 class="display-3">任务列表</h1><hr/><section ng-controller="MainController"><div class="form-group"><form class="input-group input-group-lg"><input type="text" class="form-control" ng-model="text"><span class= "input-group-btn"><button class="btn btn-secondary" ng-click="add()">添加</button></span></form><ul class="list-group m-y-2"><li class="list-group-item" ng-class="{'done':item.done}" ng-repeat="item in todoList"><button type="button" class="close" aria-label="Close" ng-click="delete(item)"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><div class="checkbox"><label><input type="checkbox"  ng-model="item.done"><span>{{item.text}}</span></label></div></li></ul><p>总共<strong>{{todoList.length}}</strong>个任务，已完<strong>{{doneCount()}}</strong>个任务<p/></div></section></header></div><script src="node_modules/angular/angular.js"></script><script src="js/app.js"></script></body></html>

0 0