AngularJs简介

最新推荐文章于 2018-09-27 09:02:39 发布

The_Web3_社区

最新推荐文章于 2018-09-27 09:02:39 发布

阅读量425

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP 文章标签： angularjs mvc web应用

本文链接：https://blog.youkuaiyun.com/jiang_xinxing/article/details/65626171

PHP 专栏收录该内容

6 篇文章

订阅专栏

一、什么是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>