AngularJs前端基础个人学习总结

最新推荐文章于 2022-06-01 07:31:35 发布
最新推荐文章于 2022-06-01 07:31:35 发布
阅读量275 收藏
点赞数
分类专栏： AngularJS 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ptGrapes/article/details/117509392
版权

AngularJs

1.数据绑定

<!--
ng-app属性声明所有被其包含的内容都属于这个AngularJS应用
只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响
-->
<html ng-app>

<head>
    <meta charset="utf-8">
    <title>Simple app</title>
    <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body> 
<!--
ng-model相当于vue中的v-model，绑定变量名称name，从而达到数据动态绑定的功能

该绑定是单向绑定，model是ng-model中的name变量，view是<h1>中的{{}}

单向绑定：通过改变model，从而改变view，{{}}就是很好的单向绑定的例子
-->
	<input ng-model="name" type="text" placeholder="Your name">
    <h1>Hello {{ name }}</h1>
</body>

</html>

同样的，ng-model还可以用来绑定对象的某个属性，从而达到从服务器获取数据，绑定到前端的功能。

<div ng-controller='MyController'>
  <!--person为数据对象，name为该对象的属性，person通过ng-controller绑定的控制器获取返回的数据-->
  <input ng-model="person.name" type="text" placeholder="Your name">
  <h1>Hello {{ person.name }}</h1> 
</div>

2.指令

  1. ng-app 指令初始化一个 AngularJS 应用程序，只有包含在该元素下的元素才能识别AngularJS
  2. ng-init 指令初始化应用程序数据。
  3. ng-model 数据绑定
    示例：
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>

</div>

</body>
</html>
  1. ng-repeat 相当于vue中的v-for，循环遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="" ng-init="person=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in person">
  {{ x.name + ', ' + x.country }}</li>
</ul>

</div>

</body>
</html>
  1. ng-click点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count(2)">点我！</button>

<p>{{ count2 }}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count2 = 0;
    $scope.count = function(num){
        $scope.count2+=num;
    }
});
</script>

</body>
</html>

3.作用域Scope

  1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。它是一个对象，有自己的属性和方法
  2. 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

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


</body>
</html>

4.根作用域rootScope

  1. 所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>姓氏为 {{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
<!--$rootScope可以作为参数传递-->
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

<p>注意 $rootScope 在循环对象内外都可以访问。</p>

</body>
</html>

5.模块module

  1. 指定当前模块的值来源于哪个控制器，如上图所示。指定当前控制器绑定的是myApp模块。
  2. 模块主要有两个参数，1：name(模块名称，string类型)；2：requires(字符串数组)，requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载

6.控制器controller

  1. 指明当前域的值是交由哪个控制器处理获得。当然，控制器也可以有自己的方法(变量和函数)。
<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>
  1. 嵌套控制器，子控制器可以访问父控制器的作用域。
<div ng-controller="ParentController"> 
 	<div ng-controller="ChildController"> 
 		<a ng-click="sayHello()">Say hello</a>  
	 </div> 
{{ person }} 
</div>

<script>
app.controller('ParentController', function($scope) {  
  $scope.person = {greeted: false};
  });  
  
app.controller('ChildController', function($scope) {  
$scope.sayHello = function() {
  $scope.person.name = 'Ari Lerner';  };
  });
</script>

# 输出结果
Say hello
{"greeted":"false","name":"Ari Lerner"}

7.过滤器 |

  1. 常见的5种过滤器
过滤器描述
currency格式化数字为货币格式
filter从数组项中选择一个子集
lowercase格式化字符串为小写
orderBy根据某个表达式排列数组
uppercase格式化字符串为大写
  1. 使用方法
    可以使用一个管道字符（|）添加到表达式和指令中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="/statics/demosource/namesController.js"></script>

</body>
</html>

#namesController.js
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

8.自定义过滤器

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
  <div ng-controller="MyController">{{name | firstUpper}}</div>

  <script>
    <!--指定是哪一个module-->
    var m1 = angular.module('myApp', []);
    <!--为该module构建自己的过滤器-->
    m1.filter('firstUpper', function(){
      return function(str) {
        return str.charAt(0).toUpperCase() + str.substring(1);
      }
    });
    <!--定义Controller-->
    m1.controller('MyController', ['$scope', function($scope) {
      $scope.name = "test";
    }]);
  </script>
</body>
</html>

9.服务service

  1. 服务是angular内置的函数或对象，个人觉得是对javaScript的一些常用功能的封装
  2. 具体用法格式：
var app = angular.module('myApp', []);
app.controller('yourController', function($scope, '服务名') {
});
  1. $location服务
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>

<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>

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

</body>
</html>
  1. $http服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>欢迎信息:</p>

<h1>{{data}}</h1>

</div>

<p> $http 服务向服务器请求信息，返回的值放入变量 "data" 中。</p>

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

</body>
</html>
  1. 自定义服务
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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.factory('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

</body>
</html>
  1. 其他服务

10.select选择框

  1. //TODO没搞清楚这个ng-model绑定的b到底是怎么来的，为什么会凭空出现一个b，他绑定的到底是那里的值？
  2. 经过测试,发现ng-model取名是什么都没关系，估计它绑定的是ng-options中for循环遍历的每一个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="b" ng-options="x.a for x in sites">
</select>

<h1>你选择的是: {{b.a}}</h1>
<p>网址为: {{b.url}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {a: "Google", url : "http://www.google.com"},
	    {a : "W3CSchool", url : "http://www.w3cschool.cn"},
	    {a : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

<p>该实例演示了使用 ng-options  指令来创建下拉列表，选中的值是一个对象。</p>
</body>
</html>

11.表格

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd)	{
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr ng-repeat="x in names">
     <td>{{ $index + 1 }}</td>  ---序号
    <td>{{ x.Name }}</td>
    <td>{{ x.Country | uppercase }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/statics/demosource/Customers_JSON.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

12.表单

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user }}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

</body>
</html>

13.依赖注入核心组件

  1. value
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="value" placeholder="请输入需要乘于3的值"></input>
    <h2>hex值是：{{hex()}}</h2>
  </div>

  <script>
    var myApp = angular.module("myApp", []);
	
	//定义value
    myApp.value("defaultValue",3);

     // 通过factory创建MathService。实际上用service也行
     myApp.service('MathService', function (defaultValue) {
       var MathService = {};

        MathService.value = function(x){
          return x*defaultValue;
        };

        return MathService;
    });

    myApp.controller("myCtrl",function($scope,MathService){
      $scope.value = 0;
      $scope.hex = function(){
        return MathService.value($scope.value);
      }
    });

  </script>

</body>

</html>
  1. service
  2. factory
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="firstName" placeholder="请输入需要求平方的值"></input>
    <h2>hex值是：{{hex()}}</h2>
  </div>

  <script>
    var mainApp = angular.module("myApp", []);

    // 通过factory创建MathService。实际上用service也行
    mainApp.factory('MathService', function () {
      var factory = {};

      factory.multiply = function (a, b) {
        return a * b
      }
      return factory;
    });

    // 通过service创建CalService。要调用哪个服务就在function加上哪个服务的参数
    mainApp.service('CalcService', function (MathService) {
      this.square = function (a) {
        return MathService.multiply(a, a);
      }
    });
	
	//将服务注入到controller
    mainApp.controller('myCtrl', function ($scope, CalcService) {
      $scope.firstName = 2;
      $scope.hex = function(){
        return CalcService.square(parseInt($scope.firstName));
      }
    });

  </script>

</body>

</html>
  1. provider
  2. constant
    详细说明见：W3C依赖注入说明

14.AngularJs路由

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入angularJS -->
<script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!-- 引入angular路由 -->
<script src="//apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
//引入ngRoute路由组件
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope) { $scope.$route = $route;})
.controller('AboutController', function ($scope) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController',
        //resolve将函数返回的值赋给'data'
        //resolve: {  'data': ['$http', function($http) {
        //return $http.get('/api').then(
      	  //function success(resp) { return response.data; },  	
       	 //function error(reason) {return false; });  
        //}];
         //}

    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> 欲上青天揽明月 </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> 把酒问青天 </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      <!-- 相当于vue中的路由占位符,页面内容会被替换放到这里展示 -->
    <div ng-view="">
    </div>
  </div>
</body>
</html>
  1. routerParams
    在这里插入图片描述在这里插入图片描述

15. 自定义指令

  1. 通过AngularJS模块API中的.directive()方法，传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字，函数返回一个对象。
<div my-directive  my-url="http://google.com"  my-link-text="Click me to go to Google"> 
</div>

#自定义指令集
angular.module('myApp', []) .directive('myDirective', function() { 
 return { 
  //告诉AngularJS这个指令在DOM中可以何种形式被声明 默认是是A 以属性的形
  式进行声明
  //E（元素） <my-directive></my-directive>
  //A（属性，默认值） <div my-directive="expression"></div>
  //C（类名） <div class="my-directive:expression;"></div> 
  //M（注释） <--directive:my-directive expression--> 
  restrict: 'EAC', 
  //创建自己的scope域，隔离其他的域 
  replace: true,  
  template: '<a href="{{myUrl}}">{{myText}}</a>' 
   }; 
 });
  1. 自定义指令的scope
<!doctype html>
<html ng-app="myApp">
<head>
  <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

  <label>Their URL field:</label>
  //绑定数据theirUrl
  <input type="text" ng-model="theirUrl">
  <div my-directive
       my-url="theirUrl"
       my-link-text="Click me to go to Google"></div>

  <script>
    angular.module('myApp', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        replace: true,
        //scope：{}隔离作用域
        scope: {
          //'='的意思是值是动态变化的，是计算得来的，随输入的变化而变化
          myUrl: '=',
          //'@'的意思是值是固定的，不会改变的
          myLinkText: '@'
        },
        template: '\
          <div>\
            <label>My Url Field:</label>\
            <input type="text" ng-model="myUrl" />\
            <a href="{{myUrl}}">{{myLinkText}}</a>\
          </div>\
        '
      }
    })
  </script>

</body>
</html>
但求上进
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于AngularJS前端云组件最佳实践
10-21
主要为大家详细介绍了基于AngularJS前端云组件最佳实践,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端个人总结
qq_55596433的博客
11-16 963
接下来我会慢慢的去说一下自己，为什么学前端。为什么学前端，相干什么和到了社会想干嘛是为了想在社会拿高薪资。任何事情都是这样，能够坚持下去并有所收获的都是少数，对大多数人来讲放弃才是常态。自学前端难的不是js，也不是各种框架，难的是坚持。只要你能认真看完这篇回答，能够坚持学下去，把我后面整理的这份学习路线上的知识点掌握到应用开发层面，找一份15K左右的工作没有任何问题。工作之后花个几年的时间消化吸收，更进一步的掌握，年薪拿个三四十万也是可以的。希望这片文档对你一些小伙伴有用。
Angular 学习总结
qq_36697163的博客
09-07 739
标题 Angular 学习总结 由于博主本人之前只接触过React， 对Angular几乎一无所知。上个月，在我司社区的组织下，截至目前学习了近一个月的Angular，对Angular有了一些非常基础的认识。下面对本月学习心得做总结，期待大家的批评指正。 标题 1、Angular的结构 Angular是一个基于 TypeScript 构建的开发平台， 一个基于组件的框架。 Angular的组件包括三个部分：带有 @Component() 装饰器的 TypeScript 类（.ts）、HTML 模
Web前端技术个人学习经验总结
智慧城市大脑
04-23 3488
目录：    1.2017-12-24（第一天Web项目）：    2.2017-12-25（第二天表格）：    3.2017-12-25（第二天框架及表单）：    4.2017-12-26（第三天CSS语言）：    5.2017-12-28（DIV+CSS）：    6.2017-12-29（JavaScript）:    7.jQuery:    8.表单验证+正则表达式+BootStr...
HTML个人学习总结—1
JasonMorgon的博客
10-06 655
web前端知识总结、归纳 HTML全称Hyper Text Markup Language，即超文本标记语言，它只是一种标记语言，并不算编程语言。我们通过HTML来编写HTML文档，用合适的HTML标签合理的显示网页结构，即HTML语义化。
前端学习个人心得，总结（个人向）
weixin_45286582的博客
06-01 460
// 获取select标签选中的option中的文本。 document.querySelector('#selectedTest option:checked').text;// 将北京这个文本值赋值给option中的文本，通常用于回显数据操作。 document.querySelector('#selectedTest').value = '北京';要获取函数的局部变量，就要把嵌套的函数定义在变量的作用域链里，就是所谓的“闭包”。 三.解析Javascript中中括号中中括号“[]”的多义性的多义性
AngularJS前端页面操作之用户修改密码功能示例
10-20
主要介绍了AngularJS前端页面操作之用户修改密码功能,结合具体实例形式分析了AngularJS针对前端用户修改密码的判断操作实现技巧,需要的朋友可以参考下
angularjs前端框架
09-02
此资源是某谷培训视频，2018年的，讲的很细，希望对想学习的同学有用
angularJS 入门基础
10-24
主要介绍了angularJS 入门基础的相关资料,需要的朋友可以参考下
如何学习前端-个人感悟
J.Anson的博客
11-27 9333
从哪里开始         当然，从最基础的开始。这里最重要的莫过于学会怎样切割页面，所谓切割，即能通过div标签的嵌套方式进行页面分割，配合少量的css样式，勾勒出想要的，但并不美观的页面。若能至此，那么就基本pass了。总结起来，即熟悉常用的标签在界面上产生的效果。        对于小白，在学习阶段，难免会碰到例如导航栏是怎么切割出来的，毫无头绪，怎么办呢？        打开浏览器，
个人前端学习总结
qq_39553391的博客
10-29 692
个人前端学习总结 前端小白的我在学习JavaScript、jQuery的过程中接触到了一些实例用法，在此举例说明。 一. 左侧隐藏式导航栏 构建一个初始状态隐藏起来的导航栏，只有一个小按钮悬挂于界面左侧来提示用户。当点击小按钮后，隐藏的导航栏就会浮现，下面是其具体实现。 1.HTML元素的创建 此处依靠了Bootstrap框架快速构建了导航栏框架及其部分简单样式。 代码如下： &amp;lt;div c...
前端开发学习总结
qq_15980201的博客
10-30 653
基础： 1、语义化H5标签 1.1、H5引进了一些新的标签，特别注意article、header、footer、aside、nav等，注意HTML的标题结构 1.2、理解浏览器解析HTML的过程，理解DOM的树形结构，及相应API 1.3、理解HTML标签在各个浏览器上的默认样式(代理样式)，理解CSS中的重置样式表的概念 1.4、理解Canvas、SVG、video
AngularJS基础一（个人学习笔记）
qq_43194031的博客
04-08 105
注：高手莫喷（欢迎及时纠错） 1、简介：Google研发的开放源代码JavaScript框架，以html为模板并扩展元素及属性 2、开发工具：Sublime text（本人使用） 3、首先获取到AngularJS的文件库，然后在开发工具中用<script>标签引入 4、ng-app是一个内置指令，可以在任意位置，有两个作用（1是启动AngularJS框架，2是告诉Angular...
web前端学习心得
热门推荐
weixin_40850986的博客
02-26 3万+
所谓行万里路，必先始于足下。刚开始学习WEB前端基础的时候，老师说，其实你们学的这个后面真正去工作的时候可能也不是很会用到，所以就有很多人会问，既然我们都用不到，那干嘛还学呀？其实，对于一个程序员来说，你不仅要有很好的后端专业能力，你还应当具备一定的前端素养，知道一些起码的前端知识。 来到传智的第一个月，我们是以基础为主吧，因为大家到这里的基础都不一样，有一些本身就具备很高水准的人，也有很多像自...
AngularJs前端框架搭建（一）
陈大奔的专栏
04-12 2万+
(持续更新) 写在最前面，从实习到毕业后这大半年来都是在现在所在的公司工作，才开始接触公司的项目时，后端都是用的熟悉的知识，然后前端却用了从来没听说过得angularjs，从开始接触到现在，也算是会熟练的写里面的内容了吧。但是整体还是很迷糊，最近正好有个自己的项目练练手，于是选择angularjs作为前端来练习练习，也算是自己对这半年来的学习总结。由于本身是写后端的，现在从头开始练习一个前端项目。
angularjs个人使用总结
wuweiforever的博客
10-17 451
1.数据自动刷新问题： (1).ng-model是双向数据绑定scope&amp;amp;amp;lt;−−−&amp;amp;amp;gt;view层，在js中如果数据更新，页面的值也会自动更新，但ng−model只能在有限的表单几个元素中使用，例如&amp;amp;amp;lt;input&amp;amp;amp;gt;,&amp;amp;amp;lt;select&amp;amp;amp;gt;,&amp;amp;amp;lt;textarea&
基于Springboot+Vue的墙绘产品展示交易平台毕业源码案例设计.zip
最新发布
04-27
网络技术和计算机技术发展至今，已经拥有了深厚的理论基础，并在现实中进行了充分运用，尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代，所以对于信息的宣传和管理就很关键。系统化是必要的，设计网上系统不仅会节约人力和管理成本，还会安全保存庞大的数据量，对于信息的维护和检索也不需要花费很多时间，非常的便利。 网上系统是在MySQL中建立数据表保存信息，运用SpringBoot框架和Java语言编写。并按照软件设计开发流程进行设计实现。系统具备友好性且功能完善。 网上系统在让售信息规范化的同时，也能及时通过数据输入的有效性规则检测出错误数据，让数据的录入达到准确性的目的，进而提升数据的可靠性，让系统数据的错误率降至最低。 关键词：vue；MySQL；SpringBoot框架 【引流】 Java、Python、Node.js、Spring Boot、Django、Express、MySQL、PostgreSQL、MongoDB、React、Angular、Vue、Bootstrap、Material-UI、Redis、Docker、Kubernetes
99-青海大学大数据中心建设分享.pptx
04-27
99-青海大学大数据中心建设分享.pptx
angularjs 1.6.9前端控件绑定属性
05-26
在AngularJS 1.6.9中，可以通过以下方式绑定前端控件的属性： 1. ng-model：用于双向绑定数据模型和表单控件，常用于input、select、textarea等表单控件。 例如： ``` ``` 2. ng-bind：用于单向绑定数据模型和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值