01-angularJs入门

最新推荐文章于 2022-04-27 19:46:52 发布

summercode007

最新推荐文章于 2022-04-27 19:46:52 发布

阅读量220

点赞数

分类专栏： angularJs web前端文章标签： javascript angularjs web应用浏览器 html

本文链接：https://blog.csdn.net/qq_27484333/article/details/70243068

版权

web前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

angularJs

3 篇文章 0 订阅

订阅专栏

AngularJS 基础入门

前言:AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

下载

CDN

<script src="https://cdn.bootcss.com/angular.js/2.0.0beta.17/angular2.min.js"></script>

官网下载地址

http://angularjs.org‘>官网地址:http://angularjs.org

使用步骤

–

导入angularJs文件路径
在想使用angularJs的区域使用ng-app声明所在区域为angularJS可使用的作用域。

例如

<html lang="en" ng-app="myApp">

以上代码声明了html包含的区域味angularJS的作用域

运算符

<h1>算术运算符</h1>
<ul>
    <li>{{1+2}}</li>
    <li>{{3-5}}</li>
    <li>{{3*3}}</li>
    <li>{{6/2}}</li>
    <li>{{3%8}}</li>
</ul>
<h1>比较运算符</h1>
<ul>
    <li>{{3>1}}</li>
    <li>{{3>=1}}</li>
    <li>{{3<1}}</li>
    <li>{{3<=1}}</li>
    <li>{{1=='1'}}</li>
    <li>{{1!='1'}}</li>
    <li>{{1==='1'}}</li>
    <li>{{1!=='1'}}</li>
</ul>
<h1>赋值运算符</h1>
<ul>
    <li>{{num=123}}</li>
    <li>{{num}}</li>
</ul>
<h1>逻辑运算符</h1>
<ul>
    <li>{{3>1 && 5>2}}</li>
    <li>{{3<1|| 3<2}}</li>
    <li>{{!1}}</li>
</ul>
<h1>三目运算符</h1>
<ul>
    <li>{{3>1?'hello geek':'hello kgc'}}</li>
</ul>

模块的创建

–

//创建模块
var app=angular.module('myApp',[]);
//创建控制器
app.controller('MyCtrl',function($scope){
    $scope.username='张无忌';
});

调用controller

<div ng-controller="MyCtrl">
    <h1>Helo {{username}}</h1>
 </div>

control方法

–

 .controller('MyCtrl2',function($scope){
          $scope.test='this is a test';
          $scope.play=function(){
              alert('playing...');
          }
 })

调用方法

<div ng-controller="MyCtrl2">
    <p><button ng-click="play()">clickMe</button></p>

$scope

例如:

app.controller('MyCtrl',function($scope){
$scope.username='张无忌';
});

$scope代表了当前controller的一个作用域。我们声明属性和方法都需要在$ scope的基础上声明

$rootScope

例如:

app.controller('MyCtrl',function($scope,$rootScope){
    $scope.username='张无忌';
    $rootScope.username='谢逊';
});

$rootScope可以在当前module中的所有controller使用。如果controller有重名的属性或方法。则会调用controller中的。

–

$watch

$scope.$ watch(‘变量名’，function(newVal,oldVal))

检测指定变量名,当变量名发生变化。会触发function(新值,旧值)

–

$interval

$interval(func,1000);

定时函数

–

常用指令

ng-app:制定作用域

ng-init:初始化数据

ng-controller:指定所使用controller

ng-click:指定单击时间调用的函数

ng-model:指定绑定的变量名

如果建议请留言