分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

AngularJS应用介绍

Angularjs   发布时间：2022-04-20  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了AngularJS应用介绍，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

AngularJS应用

@H_197_4@利用昨天的实例说明一下整个AngularJS应用，代码如下： 
<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
    <title>AngularJS Demo</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>

        var myApp = angular.module("exampleApp",[]);

        myApp.controller("dayCtrl",function ($scope) {
            $scope.day = new Date();
			$scope.Hellowolrd = "Hello Wolrd!"
        });

    </script>

</head>
<body >
    <div class="panel" ng-controller="dayCtrl">
        <div class="page-header">
            <h3>AngularJS App</h3>
        </div>
		<h4>{{HellowolrD}}</h4>
        <h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4>
    </div>
</body>
</html>


加载过程

  • angular.js ：所有的AngularJs应用，都必须引入这个js。根据使用的其它功能，可能需要引入其它js，比如resource,route等
  • ng-app：AngularJS程序入口，对该标签内的元素进行初始化。其中的exampleApp为模块的名称
  • angular.module：根据模块名定义模块。并通过[]指定该模块所依赖的其它模块
  • ng-controller：在当前元素范围内绑定指定的控制器(controller)。
  • ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建@L_874_7@。
  • {{xxx}}：花括号表示读取某一属性值

控制器

@H_737_6@myApp.controller("dayCtrl",function ($scope) { // controller statements will go here });
@H_197_4@通过这种方法定义控制器Controller。在里面有参数$scope，是通过angularjs的DI自动注入。控制器是视图和模型间的协调者，那么它所包含的逻辑就应该尽量少。一般，控制器是通过$scope参数，进行数据的操作。另外的一种定义控制器方式一般如下，它可以让我们明确定义依赖的组件和服务。

@H_737_6@myApp.controller("dayCtrl",['$scope',function ($scope) { // controller statements will go here }]);
  • 第一种定义DI的是通过方法参数名声明依赖。这种方式不推荐使用，因为js文件压缩后方法参数名会改变。
  • 第二种定义DI的是将依赖列表放数组的前部，注入目标放数组最后@L_874_7@元素。推荐使用这个方法。

控制器在Views中的定义

@H_197_4@声明了控制器后，可以在View中的任何地方进行定义。例如在body中定义 
<body ng-controller="dayCtrl">
@H_197_4@也可以在其它元素，比如div中定义 
<div class="panel" ng-controller="dayCtrl">
@H_197_4@或者是form元素 
<form ng-controller="dayCtrl">……</form>

注意：在元素上定义controller,那么该controller的作用域只存在该元素中。 每个Controller中的$scope是互不相同的，并且互不干扰。@H_197_4@

过滤器

@H_197_4@在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。
@H_197_4@如上面的时间过滤： 
<h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4>
在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。我们通过myapp.filter,进行Filter的自定义，实现Filter扩展功能。

大佬总结

以上是大佬教程为你收集整理的AngularJS应用介绍全部内容，希望文章能够帮你解决AngularJS应用介绍所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：angularjs介绍应用
猜你在找的Angularjs相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap