AngularJS

最新推荐文章于 2024-08-14 12:45:22 发布

mask-hx

最新推荐文章于 2024-08-14 12:45:22 发布

阅读量79

点赞数

文章标签： angular.js 前端 angular

本文链接：https://blog.csdn.net/weixin_44348536/article/details/94219884

版权

##第一个AngularJS程序
MVC view（视图）<-----> module（模块） <-----> controller（控制器）

ng-app指令

：一个应用程序，一般放在html标签中
2用法： ng-app=“myApp”（模块名称名称）

ng-controller指令

控制器放在需要应用的标签中，需放在模块中
用法： ng-controller=“MyController”
控制器命名的规则：
1、采用帕斯卡命名法，即每个单词首字母大写
2、结尾为Controller

ng-model指令
数据的双向绑定 html标签中 ng-model="name"
JS代码中

>  var app = angular.module('myApp',[]);
>        app.controller('FirstController',['$scope',function($scope){
					$scope.name = 'tom';
}])

ng-bind指令
数据的单向绑定 ng-bind="name"
当在修改视图view时(修改网页时),可以运用数据的双向绑定或数据的单向绑定来修改数据
即更新数据

ng-click指令
JS代码中

var app = angular.module('myApp',[]);
app.controller('FirstController',['$scope',function($scope){
    $scope.calc = function(e){
        switch (e.target.value){
            case '加':
                $scope.result = $scope.num1*1+$scope.num2*1;
                break;
            case '减':
                $scope.result = $scope.num1-$scope.num2;
                break;
            case '乘':
                $scope.result = $scope.num1*$scope.num2;
                break;
            case '除':
                $scope.result = $scope.num1/$scope.num2;
                break;
        }

    }
}]);

html文件中

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <script src="../angular-1.5.8/angular.min.js"></script>
    <script src="../js/ng06.js"></script>
    <title>简易计算器</title>
</head>
<body>
<div ng-controller="FirstController">
    操作数1：<input type="text" ng-model="num1">
    操作数2：<input type="text" ng-model="num2">
    <input type="button" value="加" ng-click="calc($event)">
    <input type="button" value="减" ng-click="calc($event)">
    <input type="button" value="乘" ng-click="calc($event)">
    <input type="button" value="除" ng-click="calc($event)">
    <h1>运算结果：<span ng-bind="result"></span></h1>
</div>
</body>
</html>

以上是一个简单的AngularJS 示例，简易的计算器，写博客的第二天 feel great ，，
逆水行舟，不进则退，要保持一个谦逊的心态，总有那么一个人会让你成长，不要过度自信。
在这里插入图片描述
Dream

mask-hx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS

##第一个AngularJS程序MVC view（视图）<-----> module（模块） <-----> controller（控制器）ng-app指令：一个应用程序，一般放在html标签中2用法： ng-app=“myApp”（模块名称名称）ng-controller指令控制器放在需要应用的标签中...
复制链接

扫一扫