AngularJS 基础教程一:

Posted caozong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS 基础教程一:相关的知识,希望对你有一定的参考价值。

  

一:了解AngularJS

  AngularJS是一款非常优秀的前端高级 JS 框架,由 Misko Hevery 等人创建 2009 年被 Google 收购,用于其多款产品 有一个全职的开发团队继续开发和维护这个库 有了这一类框架就可以轻松构建 SPA 应用程序 single page web application 通过指令扩展了 html,通过表达式绑定数据到 HTML。

二:AngularJS的优势

  1.更少的代码,实现更强劲的功能

  2.带领前端进入MVC时代

    (mvc模式:Model(模型)是应用程序的核心,指的是程序在数据库中存储数据。

          View(视图)是应用的界面,将数据库里的数据展现出来,展现给程序的使用者。

          Controller(控制器)处理用户的交互行为,程序使用者更改数据,由控制器接受并发送给模型。)

三:AngularJS的特性

  1.MVC

  2.模块化

  3.自动化双向数据绑定 使用{{ }}对动态数据绑定,绑定到元素的innerHTML

  4.指令系统 ng-

  5.表单验证

  6.HTML组件化

  7.Angular 在构建 增加、查询、修改、删除的页面应用时能发挥最大优势。CRUD

四:AngularJS语法特点

  1.Angular 最大程度的减少了页面上的 DOM 操作;

  2.让 javascript 中专注业务逻辑的代码;

  3.通过简单的指令结合页面结构与逻辑数据;

  4.通过自定义指令实现组件化编程;

  5.代码结构更合理;

  6.维护成本更低;

  7.Angular 解放了传统 JavaScript 中频繁的 DOM 操作

五:AngularJS的用法

  1.编写第一个Angular应用

  当网页加载完毕,AngularJS 自动开始执行; HTML 页面中 ng-xxx 的属性称之为指令(Directive); ng-app 指令告诉 AngularJS,<html> 元素是 AngularJS 应用程序管理的边界; {{ }} 双花括号里面的叫做数据绑定表达式,可以是任何有效的JavaScript值、变量或语句。而在页面上显示的是表达式计算后的结果值。 | 管道符号可以给表达式添加过滤器,如 | number:2, |currency

<html ng-app>
  <head></head>
  <body>
     {{"现在开始学习Angular"}}
  </body>
</html>

  2.Module.controller() 控制器 

    第二行代码创建了一个名为userCtrl的控制器,以及一个控制器函数 控制器函数接受一个名为$scope的参数

var app = angular.module(“myApp”, []); //myApp模块名 app是模块实例
app.controller(“userCtrl” ,function($scope){  //userCtrl是控制器的名字
	$scope.name= “赵敏”; //$scope用来保存数据,定义方法
});

  3.ng-指令用法

  (1)ng-model

    ng-model 指令把文本框的值绑定到变量 name 上; {{ name }} 表达式就是把应用程序变量 name 绑定到某个dom元素的innerHTML

    例: 请输入你的名字:<input type="text" id="username" ng-model="name"> 你的名字是: <span>{{name}}</span>

  (2)ng-bind指令

    ng-bind 指令将指定变量或表达式的值显示在元素的innerHTML 如果给定的变量或表达式修改了,指定元素的 innerHTML 也会修改。

  例: <input type="text" ng-model="text"> --将文本框的值绑定到text变量 你输入的值是:<span ng-bind="text"></span> --动态显示text变量的值

  (3)ng-init 指令

    初始化应用时创建一个变量,并给变量赋值 ng-init 执行给定的表达式 建议用controller代替

 

    例: <div ng-app="" ng-init="myText=‘Hello World!‘"> <h1>{{myText}}</h1>

  (4)ng-click指令

    Angular的点击事件处理器,给元素通过click事件绑定$scope对象的方法

    例: <input type="text" ng-model="text"> <button ng-click="show()">显示输入值</button>

        $scope.show = function(){ alert("您输入的内容是:" + $scope.text); }

  (5)ng-repeat 指令

  根据绑定数组成员的数量,复制被绑定的元素 在ng-repeat指令复制元素的过程中,还提供了几个专有变量:

   $index 返回当前对象或属性的下标

   $first 当前对象为集合中的第一个对象时返回true

   $last 当前对象为集合中的最后一个对象时返回true

   $middle 当前对象既不是集合中第一个对象又不是最后一个对象返回true

   $even 集合中的偶数编号返回true

   $odd 集合中的奇数编号返回true ng-repeat-start ng-repeat-end 重复生成多个顶层元素

  (6)ng-class 指令

  给元素添加CSS类:不能直接添加类名,需通过以下三种方式添加:

  1. 直接绑定值为CSS类名的$scope对象属性

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
    <span ng-class="red1">曹总</span>
</div>

<script src="../../script/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("listController", function($scope) {
        $scope.red1=red;
    });
</script>
</body>
</html>

 

 

 

 

  2. 以字符串数组方式选择性添加CSS类 表达式 ? ‘style1’:‘style2’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .style1 {
            height: 200px;
            width: 200px;
            background: salmon;
        }

        .style2 {
            background: violet;
        }
    </style>
</head>
<body>
<div ng-app ng-init="data={style1:true,style2:false}">
    <!--ng-class指令会根据设置对象的情况决定是否添加某些class类名-->
    <div ng-class="{style1:data.style1,style2:data.style2}"></div>
    <!--<div ng-class="style1:true,style2:false"></div>-->
    <input type="button" value="变化颜色" ng-click="data.style2 = !data.style2">
</div>
<script src="../../script/angular.min.js"></script>
    <script>
        var data = {
            style1:true,
            style2:false
        }
    </script>
</body>
</html>

 

  3. 通过key/value对象的方式添加多个CSS类 ng-class=”{style1:true,style2:false}”o.startsWith(‘D’); indexOf() contains() ng-class-odd 绑定奇数行样式 ng-class-even 绑定偶数行样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <style>
        .red {
            color: red;
        }
        .green {
            color: greenyellow;
        }
    </style>
</head>
<body ng-app="myApp">
<div ng-controller="listController">
    <ul>
        <li ng-repeat = "item in datas" ng-class="{red:item.startsWith(‘张‘)">{{ item }}
        </li>
    </ul>
</div>

<script src="../../script/angular.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller("listController", function($scope) {
        $scope.datas = ["张三","李四","王五","赵六",""];
    });
</script>
</body>
</html>

   (7)ng-style 指令

    ng-style 指令为 HTML 元素添加 style 属性。 ng-style 属性值必须是对象,表达式返回的也是对象 对象由 CSS 属性和值注册,即 key:value 。

    ng-style=” {color: ‘white‘}”

    (8)ng-show/ng-hide指令

    ng-show 值为true或flase 显示或隐藏元素 ng-hide 值为true或flase 隐藏或显示元素

    (9)ng-if指令

    从DOM中添加和移除元素 ng-if=”true”时保留元素 ng-if=“false”时移除元素

  (10)ng-swich指令

    ng-switch-when =“” 值为指定value值的时候 显示元素

     ng-switch-default 没有匹配的value值时显示元素

  (11)ng-link/ng-src指令

    绑定元素的link或src地址 <img ng-src="{{item.url}}"> AngularJS 设置图片地址的指令:ng-src AngularJS 代码执行前不显示图片。

  (12)ng-include指令

    该指令从服务器获取一段HTML片段,编译并处理该片段中包含的任何angular指令,并添加到DOM元素中。

    <ng-include src=" ‘a.html‘ " ></ng-include>

    src: 指定要加载内容的URL src的值必须为表达式 onload: 指定一个在内容被加载时调用的表达式 autoscroll:指定内容在加载时是否滚动到这部分视图所在的区域

  (13)ng-cloak指令

    使用一个CSS样式隐藏内联绑定表达式,(在文档第一次加载会短暂可见)。 ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现的问题。 AngularJS 应用在加载时,文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果, ng-cloak 指令是为了防止该问题的发生。 该指令没有参数。

    <span ng-cloak>{{ 表达式 }}</span>

  4.Module.directive自定义指令

  指令是Angular最强大的特性,通过指令能扩展并增强HTML。 当内置指令无法满足需求时,可以创建自定义指令。 自定义指令是通过Module.directive方法创建的。 Module.directive() 方法接受两个参数,第一个是指令名,第二个是函数。 该函数用return语句返回另一个指令函数,使用该自定义指令,Angular就会调用这个函数。 指令函数接受三个参数,第一个scope,用于检查在视图中可用的数据。 第二个参数element是一个jqLite对象,jqLite是Angular提供一个剪裁版本的jQuery 第三个参数是attrs。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <script src="../../script/angular.min.js"></script>
    <script>
        var m= angular.module("my", [])
        m.controller("ctr1", function ($scope) {
            $scope.dayNames = [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六];
            $scope.today = $scope.dayNames[new Date().getDay()];
            //getDay星期是从0开始的,星期日的下标是0
        });
        m.controller("ctr2", function ($scope) {
            $scope.dayNames = [星期日, 星期一, 星期二, 星期三, 星期四, 星期五, 星期六];
            $scope.tommorrow = $scope.dayNames[(new Date().getDay() + 1) % 7];
        });
        m.directive(highlight, function () {
            return function (scope,element,attrs) {
                if(scope.today == attrs[highlight]){
                    element.css("color",red);
                }else{
                    element.css("color",green)
                }
            }
        })
    </script>
</head>
<body ng-app="my">
<div class="container">
    <h2>今天是星期几?</h2>
    <p ng-controller="ctr1" highlight="星期二">今天是{{ today }}</p>
    <p ng-controller="ctr2" highlight="星期一">明天是{{ tommorrow }}</p>
</div>
</body>
</html>

 

以上是关于AngularJS 基础教程一:的主要内容,如果未能解决你的问题,请参考以下文章

从 AngularJS url 中删除片段标识符(# 符号)

angularJS使用ocLazyLoad实现js延迟加载

AngularJs 基础(60分钟入门) (转)

web前端教程前必知的AngularJs基础

AngularJS入门学习笔记一

jstl标签库基础教程及其使用代码