AngularJS 1.0 入门实例

最新推荐文章于 2022-12-05 16:43:54 发布

wdapp

最新推荐文章于 2022-12-05 16:43:54 发布

阅读量179

点赞数

文章标签： Angular 1.0

本文链接：https://blog.csdn.net/wanda000/article/details/104061955

版权

AngularJS 表达式写在双大括号内：{{ expression }}
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
双向绑定

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Ada";
});
</script>

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
根作用域$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
ng-controller 指令定义了应用程序控制器。AngularJS 应用程序被控制器控制。
View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
自定义过滤器

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

$http 服务：$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

$timeout 服务：AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
$interval 服务：AngularJS $interval 服务对应了 JS window.setInterval 函数。
自定义服务

<div ng-app="myApp" ng-controller="myCtrl">
<p>255 的16进制是:</p>
<h1>{{hex}}</h1>
</div>
<p>自定义服务，用于转换16进制数：</p>
<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

AngularJS DOM操作
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令隐藏或显示一个 HTML 元素。
ng-hide 指令用于隐藏或显示 HTML 元素。
AngularJS 事件
ng-click 指令定义了 AngularJS 点击事件。
Angularjs依赖注入


<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
   </head>
   
   <body>
      <h2>AngularJS 简单应用</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>结果: {{result}}</p>
      </div>
      
      <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
      
      <script>
        //创建模块
         var mainApp = angular.module("mainApp", []);
         //AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
        //Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
         mainApp.value("defaultInput", 5);
         
         //constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
         //mainApp.constant("configParam", "constant value");
         //自定义服务
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         //创建控制器
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
            
      </script>
      
   </body>
</html>

路由

 <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
        <!--路由视图-->
        <div ng-view></div>
        <!--引用angularjs和angular-route-->
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            //创建模块
            angular.module('routingDemoApp',['ngRoute'])
            //配置路由
            .config(['$routeProvider', 
            //回掉函数
            function($routeProvider){
                $routeProvider//路由对象
                //地址,对象{template:简单的html元素}
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                //重定向
                .otherwise({redirectTo:'/'});
            }]);
        </script>

$routeProvider.when(url,{
    template:string, //在ng-view中插入简单的html内容
    templateUrl:string, //在ng-view中插入html模版文件
    controller:string,function / array, //在当前模版上执行的controller函数
    controllerAs:string, //为controller指定别名
    redirectTo:string,function, //重定向的地址
    resolve:object<key,function> //指定当前controller所依赖的其他模块
});

wdapp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 1.0 入门实例

AngularJS 表达式写在双大括号内：{{ expression }} ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值（比如输入域的值）绑定到应用程序。双向绑定<div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-...
复制链接

扫一扫