Angular学习笔记二

最新推荐文章于 2025-06-17 15:32:41 发布

purpleyou

最新推荐文章于 2025-06-17 15:32:41 发布

阅读量136

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/qq_42734999/article/details/94380575

Angular 专栏收录该内容

3 篇文章

订阅专栏

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面

一、HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令

1. ng-disabled 指令 : 直接绑定应用程序数据到 HTML 的 disabled 属性

//html部分
<body ng-app="myapp" ng-controller="myCtl">
    <div class="container">
        <h1 class="page-header">Title</h1>
        <p>
            <button class="btn btn-primary" ng-click="dis()">禁用</button>
        </p>
        <div class="form-group">
            <textarea class="form-control" ng-disabled='bg'>fhfhfhf</textarea>
        </div>
    </div>
</body>

//js部分
app = angular.module('myapp', []);
app.controller('myCtl', function ($scope) {
    $scope.dis = function () {
        $scope.bg = true;
    }
})

2. ng-show 指令 : 隐藏或显示一个 HTML 元素

//html
 <p>
   <button class="btn btn-primary" ng-click="dis()">隐藏</button>
 </p>
 <div class="well" ng-show="show">show</div>

//js
app.controller('myCtl', function ($scope) {
   $scope.show = true;
   $scope.dis = function () {
       $scope.show = false;
   }
})

3. ng-hide : 指令用于隐藏或显示 HTML 元素。

二、表单

angular.copy()：拷贝数据

//html
<form action="">
   <div class="form-group">
        用户名:<input type="text" class="form-control" ng-model="user.name">
    </div>
    <div class="form-group">
        密码:<input type="text" class="form-control" ng-model="user.pwd">
    </div>
    <div class="form-group">
        <input type="button" class="btn btn-danger" ng-click="reset()" value="重置">
    </div>
</form>

//js
app.controller('myCtl', function ($scope) {
    $scope.master = { 'name': 'user1', 'pwd': '123' };
    $scope.reset = function () {
        $scope.user = angular.copy($scope.master);
    }
    $scope.reset();
})

三、全局api

1. angular.lowercase() : 转换字符串为小写

app.controller('myCtl', function ($scope) {
   $scope.str = angular.lowercase('HELLO');
})

2. angular.uppercase() :

app.controller('myCtl', function ($scope) {
   $scope.str = angular.uppercase('hello'); 
})

3. angular.isString() : 判断给定的对象是否为字符串，如果是返回 true

app.controller('myCtl', function ($scope) {
    $scope.str = angular.isString('hello'); 
})

4. angular.isNumber() : 判断给定的对象是否为数字，如果是返回 true

app.controller('myCtl', function ($scope) {
   $scope.str = angular.isNumber(12); 
})

四、AngularJS 包含

使用 AngularJS, 可以使用 ng-include 指令来包含 HTML 内容

<div class="container">
    <h1 class="page-header">Angular框架</h1>
    <div class="well">{{str}}</div>
    <div ng-include="'index.html'"></div>
</div>

五、Angular路由

1. angular.module(‘routingDemoApp’,[‘ngRoute’])
包含了 ngRoute 模块作为主应用模块的依赖模块

2. <div ng-view>
该 div 内的 HTML 内容会根据路由的变化而变化

//html
<div class="col-md-2">
    <div class="list-group">
        <a href="#/" class="list-group-item">首页</a>
        <a href="#/html" class="list-group-item">HTML5</a>
    </div>
</div>
<div class="col-md-10">
    <div ng-view></div>
</div>

//js
angular.module('myapp', ['ngRoute']).config([
    '$routeProvider',
    function($routeProvider){
        $routeProvider
        .when('/',{templateUrl:'demo.html'})
        .when('/html',{template:'html'})
        .otherwise({redirect:'/'});
    }
]);