欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

AngularJS基础入门介绍

程序员文章站 2022-03-29 14:49:10
...
这篇文章介绍的内容是关于AngularJS基础入门介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下。

关键点:

前端JS框架:封装了使用JS开发前端重复功能,扩展了HTML,主要用于页面操作和显示。

核心:MVC、模块化、双向数据绑定、依赖注入、语义化标签、表达式等。

双向数据绑定

引入相关js文件

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--匿名应用模块-->
       <p ng-app="">
           <input ng-model="username" name="username"/>
           <input ng-model="username"/>
           <p>{{username}}</p>
           <p ng-bind="username"></p>
       </p>
    </body>
</html>


ng-app=””匿名应用模块,一般要写名字,便于后面初始化

ng-model:自动绑定表单元素的value的值到Angularjs内部变量中。

ng-bind:作用等同于表达式,但用法不同。一般用于绑定非表单元素,用来显示变量的。

ng-bind和{{}}区别:前者会将标签的子标签的所有内容替换为变量的内容,后者只是在当前位置显示变量的内容。


基于模块化的MVC(MVVM)

视图:主要指HTML静态页面数据标签,主要是用来显示。

模型:主要只填充视图的、逻辑处理的一些数据。比如json、变量

控制:一些js代码,编写逻辑。主要是获取模型、填充视图、从视图获取数据、填充模型。

m和vm的转换:

比如变量:

var username=”XiaoQi”;
$scope.username=username;

vm的变量其实就是绑定到全局变量$scope中属性。

页面上:{{username}}

注意:Angularjs变量在页面上不能加$scope。

如果是定时器等内部js改变了变量,那么默认情况下Angularjs不能实现双向数据的绑定显示,需要使用$.digest强制通知(刷新)

页面打开时初始化内容示例:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--<p ng-app="myApp" ng-controller="myCtrl"  ng-init="username='Jack'">-->
       
       <p ng-app="myApp" ng-controller="myCtrl">
           
           <input ng-model="username"/>
           <p>{{username}}</p>
       </p>
       
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           //参数1:应用模块的名字
           //参数2:使用扩展模块,这里没有
           var myApp=angular.module("myApp",[]);
           //初始化控制器:认为控制器绑定了一堆js
           //参数1:控制器的名字
           //参数2:js函数
           myApp.controller("myCtrl",["$scope",function ($scope) {
              //初始化变量
              $scope.username="XiaoQi";
              //可以写任何的js
           }]);
           
       </script>
    </body>
</html>



注意:

如果定义了有名字的应用模块和控制器,那么必须使用js初始化它!

依赖注入DI


AngularJS基础入门介绍

按钮事件绑定

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <input ng-model="username"/>
           <input type="button" value="清空数据1" ng-click="clearMsg()"/>
           <input type="button" value="清空数据2" ng-click="username=''"/>
           <p>Hello {{username}}</p>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           //初始化应用模块
           var myApp=angular.module("myApp",[]);
           //初始化控制器
           myApp.controller("myCtrl",["$scope",function($scope){
              //初始化一个angularjs的事件
              $scope.clearMsg=function(){
                  //清空数据
                  $scope.username="";
              };
           }]);
       </script>
    </body>
</html>


重复遍历

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
    </head>
    <body>
       <!--视图-->
       <p ng-app="myApp" ng-controller="myCtrl">
           <table border="1">
              <tr>
                  <th>序号</th>
                  <th>商品编号</th>
                  <th>商品名称</th>
                  <th>商品价格</th>
              </tr>
              <tr ng-repeat="product in  products">
                  <td>{{$index+1}}</td>
                  <td>{{product.id}}</td>
                  <td>{{product.name}}</td>
                  <td>{{product.price}}</td>
              </tr>
           </table>
       </p>
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",[])
           .controller("myCtrl",["$scope",function($scope){
              //json数组
              $scope.products=[
                  {"id":1001,"name":"电视机","price":998},
                  {"id":1002,"name":"洗衣机","price":988898}
              ];
           }])
        </script>
    </body>
</html>

product:随便写,每次遍历时的临时angularjs的对象,这里指每一个json对象。


路由机制

之前:include包含页面,只是复用页面,但复用后的页面也是整体刷新的。

通过angularjs的路由,可以实现,部分刷新,实现重复的头和尾可以不刷新。而且多视图单页面效果。

底层实现:通过html中#(锚点)来实现的。

官方例子:

AngularJS基础入门介绍

写法:url+#+子路径(要在中间显示的)


引入路由模块:

<!--引入路由模块-->
       <script type="text/javascript"  src="../js/angular-route.min.js"  ></script>


<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title></title>
       <!--引入Angularjs-->
       <script type="text/javascript" src="../js/angular.min.js" ></script>
       <!--引入路由模块-->
       <script type="text/javascript" src="../js/angular-route.min.js" ></script>
    </head>
    <body>
       <p ng-app="myApp">
           <p>===========我是头<br />
              <a href="#/">首页</a>
              <a href="#/computer">电脑分类</a>
              <a href="#/money">财务管理</a>
           </p>
           <!--路由中的包含的页面的显示,只能有一个元素-->
           <p ng-view></p>
           
           <p>==========我是脚</p>
           
       </p>
    
    
       <!--控制器-->
       <script type="text/javascript">
           angular.module("myApp",['ngRoute'])
           //angularjs的配置,在配置中配置路由内容
           .config(['$routeProvider', function($routeProvider){
                $routeProvider
                //template中支持html标签
                   .when('/',{template:'这是<h1>首页页面</h1>'})
                   //.when('/computer',{template:'这是电脑分类页面'})
                   .when('/computer',{templateUrl:'computer.html'})
                   .when('/money',{template:'这是财务页面'})
                   //如果都匹配不上,则跳转到一个页面
                   .otherwise({redirectTo:'/'});
           }]);
       </script>
    </body>
</html>


ng-view:用来显示路由的结果的内容

when:判断语句

template:html的结果,支持html标签

templateUrl:支持加载另外的页面

相关推荐:

AngularJS所有版本下载

AngularJS学习总结

angularjs和angular4的区别。为什么使用angular4

以上就是AngularJS基础入门介绍的详细内容,更多请关注其它相关文章!

相关标签: AngularJS