Angularjs的入门

最新推荐文章于 2021-07-15 16:14:49 发布

xuxu_qkz

最新推荐文章于 2021-07-15 16:14:49 发布

阅读量818

点赞数

分类专栏：前端自动化工具 angularjs 文章标签： angularjs web框架

本文链接：https://blog.csdn.net/xuxu_qkz/article/details/78611336

版权

前端自动化工具同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

angularjs

1 篇文章 0 订阅

订阅专栏

1.angular是什么?

AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展增强HTML功能,它专为构建“强大”的WEB应用而设计。
Angular 简称 ng；

2.环境准备
1)下载angular
https://code.angularjs.org/
2)使用angular

1、加入angular库
a、解压：angular-1.5.8.zip (包含所有angular相关文件)；
b、拷贝angular.min.js到项目libs目录（如果没有请新建）中；

2、通过 script 标签添加到网页中，就可以使用angularjs：

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

3、检查angular是否可以用

<script type="text/javascript">
    alert(angular);
</script>

3.hello angular

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body>

<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>

</body>
</html>

angular你已经学会了. 哈哈~~~

4.利用yoman 安装angular

a.安装yoman模块

npm install -g generator-karma generator-angular

b.创建项目文件夹后运行

yo angular

c.安装完项目框架结构之后,停止命令,改用cnpm安装

cnpm i
bower install

d.选择gulp构建工具

i.更改gulpfile.js

将

.pipe($.useref({searchPath: [yeoman.app, '.tmp']}))

改为

.pipe($.useref({
        searchPath: [yeoman.app, '.tmp'],
        transformPath: function(filePath) { //路径转换，默认的路径是当前目录下面的bower_components
            return filePath.replace('/bower_components','/app/bower_components')
        }
    }))

将

gulp.task('copy:fonts', function () {
  return gulp.src(yeoman.app + '/fonts/**/*')
    .pipe(gulp.dest(yeoman.dist + '/fonts'));
});

改为

gulp.task('copy:fonts', function () {
            //修改字体文件的路径，默认为"/fonts"
  return gulp.src(yeoman.app + '/bower_components/bootstrap/fonts/**/*')
    .pipe(gulp.dest(yeoman.dist + '/fonts'));
});

ii.修改 .bowerrc文件

将

"directory": "bower_components"

改为

"directory": "app/bower_components"

e.将bower_components目录移动到app目录下面

f.打开app/index.html删除下面这段代码

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
      ............................
    </script>

f. gulp命令运行

5.关于angular的构架认识

这里写图片描述

angularjs 采用的是MV VM模式model与View分离,通过VM双向连接,弱化controller的作用.

对于用户界面的交互Command事件（如ngClick、ngChange等）则会转发到ViewModel对象上，通过ViewModel来实现对于Model的改变。然而对于Model的任何改变，也会反应在ViewModel之上，并且会通过$scope的“脏检查机制”（$ digest）来更新到View。从而实现View和Model的分离，达到对前端逻辑MVVM的分层架构。

6.表达式语法

1.AngularJS 表达式写在双大括号内：{{ expression }}。
2.Angular`JS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
3.AngularJS 将在表达式书写的位置”输出”数据。（表达式写在哪，内容就显示在哪）
4.AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
5.AngularJS 可以进行运算,如 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}。

  <body ng-app>
    <!-- 数字表达式 -->
   {{ 100 + 5 }}  <!-- document.write(result) -->
    <hr>
   <!-- 字符串 -->
    {{ '100'+'5' }} <br>
    {{ 'abcdef'.length }} <br>
    {{ 'abcdef'.substr(3,2) }}
    <hr>
    <!-- 对象 -->
    <div ng-init="person={'name':'小强','age':18}">
        姓名：{{ person.name }} <br>
        年龄：{{person.age}}
    </div>
    <!-- 数组 -->
    <hr>
    <div ng-init="hobbys=['吃饭','睡觉','敲代码']">
        第三个：{{ hobbys[2] }} <br>
    </div>
  </body>

得到的结果:
这里写图片描述

8.模块和作用域

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引入angular -->
    <script src="./lib/angular.min.js" charset="utf-8"></script>
  </head>
  <body ng-app="myapp">
    <!-- 声明为angular应用(全局) -->
    <div>
      <!-- ng-model 指令把元素值（比如输入域的值）绑定到应用程序，存储值。 -->
        <p>名字 : <input type="text" ng-model="name"></p>
      <!-- 表达式显示值 -->
        <h1>Hello {{name}}</h1>
      <h2>{{msg}}</h2>
    </div><hr />
    <!-- 局部模块1 -->
    <div ng-controller="myController">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {{name}}</h1>
      <h2>{{msg}} </h2>
      <button ng-click="handleClick()">按钮1</button>
    </div>
    <hr />
    <!-- 局部模块2 -->

    <div ng-controller="myController2">
      <p>名字 : <input type="text" ng-model="name"></p>
      <h1>Hello {{name}}</h1>
      <h2>{{msg}}</h2>
      <button ng-click="handleClick()">按钮2</button>
    </div>
    <hr />
  </body>

  <script>
    //在angular上创建模块
    var myapp=angular.module('myapp',[]);
    //全局初始化定义初始值
    myapp.run(function ($rootScope) {
      //&rootScope根（顶级）作用域
      $rootScope.name="请输入内容";
      $rootScope.msg="全局消息";

      // alert($rootScope.name);
    })
    //局部初始化,定义默认值和方法
    myapp.controller('myController',function ($scope) {
      //$scope == ViewModel
      $scope.name="我是局部!!";
      $scope.msg="局部消息";
      $scope.handleClick=function () {
        alert('111');
      };

    })
    //局部初始化2
    myapp.controller('myController2',function ($scope) {
      $scope.name="我是局部222";
      $scope.msg="局部消息222";
      $scope.handleClick=function () {
        alert('222');
      };
    })
  </script>
</html>

小结:

1.取值 “就近原则”,局部优先
2.设值 “最小力度影响”,优先影响局部
3.不同模块互不影响
4.要使用定义的方法和属性,必须使用ng-*指令
5.全局模块只能有一个,局部模块可以有多个

9.angular指令

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
带有前缀 ng-* 的都是angular指令

常见的指令有:

a. ng-app
声明为angular应用, angular只对ng-app内部的标签进行处理。

b.ng-init
指令初始化应用程序数据，定义变量。

  <div ng-app="" ng-init="username='初始值'">
    <p>在输入框中尝试输入：</p>
    <p>姓名：<input type="text" ng-model="username"></p>
    <p>你输入的为： {{username}}</p>
  </div>

c.ng-bind
使用给定的变量或表达式的值来替换 HTML 元素的内容。

<div ng-bind="expression"></div>
等价于
{{expression}}

d.ng-model
指令把元素值（比如输入域的值）绑定到应用程序，存储值。
ng-Model 职责为：

1、绑定视图到模型，如 input, textarea或select 等指令。
2、提供验证操作 (如必输、数字、email、url)。
3、维护控件的状态 (有效/无效, 有改动/无改动, 触摸过/未触摸, 验证错误等)。
4、设置元素上相关的css类 (ng-valid,ng-invalid, ng-pristine, ng-dirty, ng-touched, ng-untouched) ，包括动画。
5、注册控件到父表单。

e.ng-show , ng-hide指令
显示/隐藏HTML元素, 通过添加”display:block”属性来操控,所以在源码中是能看到的.

<script type="text/javascript">
            //定义应用模块
            angular.module("app",[])
            .controller("NGController",function($scope,$timeout){
                //是否显示
                $scope.visible = false;
                $scope.logoPath = "./img/ddm.jpg";
                //切换显示状态
                $scope.toggleShow=function(){
                    $scope.visible = !$scope.visible;
                }
            });
</script>

    <div ng-controller="NGController">
            <div class="box1" ng-show="visible"></div>
            <button ng-click="toggleShow()">切换显示</button>
        </div>

f. ng-if
生成或移除DOM元素, 所以在源码中是看不到的。

$scope.isVip=true; 
<div ng-if="isVip">
        你是VIP客户，你可以享受VIP特权。
</div>

g. ng-class
ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。

如果表达式结果为字符串，则字符串为使用空格分隔的一个或多个类名。
$scope.clsStr = "one two three";
<div ng-class="clsStr"></div>
如果表达式结果为一个数组，则数组中每个元素为使用空格分隔的一个或多个类名字符串。
$scope.clsArr = ["one","two","three"];
<div ng-class="clsArr"></div>
如果表达式结果为一个对象，对象中的每个key-value中如果键值为真时则键名作为类名。
<div ng-class="{one:true,two:false,three:true}"></div>

g. ng-href

使用当前作用域中的属性动态创建URL时，应该用ng-href代替href。

注意==> href的潜在问题是当用户点击一个由插值动态生成的链接时，如果插值尚未生效，将会跳转到错误的页面（通常是404）,所以使用ng-href。

h. ng-src
AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像：

<img src="{{imgPath}}" />  //错误，angular还未获取表达式的值。 所以此时src的路径为”{{imgPath}}”

$scope.imgPath = "./img/ddm.jpg";
<img ng-src="{{imgPath}}" />   //表达式获取值后，才会去加载图片。

i. ng-repeat
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。

$index：遍历的进度（0…length-1）。
$first：当元素是遍历的第一个时值为true。
$middle：当元素处于第一个和最后元素之间时值为true。
$last：当元素是遍历的最后一个时值为true。
$even：当 $index值是偶数时值为true。 \;$ odd：当$index值是奇数时值为true。

<ul ng-init="hobbys=['上午','玩游戏','看小说']">
                <li ng-repeat='item in hobbys' ng-class="{odd:$odd}">  
                    {{item}}
                </li>
</ul>

j. 自定义的指令
使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

待续—–

xuxu_qkz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angularjs的入门

1.angular是什么? AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展增强HTML功能,它专为构建“强大”的WEB应用而设计。 Angular 简称 ng；2.环境准备 1)下载angular https://code.angularjs.org/ 2)使用angular1、加入angular库 a、解压：angular-1.5
复制链接

扫一扫