Angularjs的重要概念

engpj 2023-03-28 原文

AngularJS的重要概念

MVC模式

AngularJS最早按照MVC模式设计，在这种设计模式下，AngularJS组件可以分为：

M: Model，即模型，是应用程序中用于处理应用程序数据逻辑的部分，在AngularJS中:
- 即作用域对象(当前为$rootScope), 它可以包含一些属性或方法；
- 充当储存数据的容器；
- 提供操作数据的方法。
V: View，即视图，是应用程序中用于处理数据显示的部分，在AngularJS中:
- 即HTML页面，AngularJS提供了一些指令来增强HTML标签的作用；
- 包括: html/css/directive/expression；
- 可显示Model的数据；
- 将数据同步到Model；
- 可与用户交互。
C: Controller，即控制器，是应用程序中处理用户交互的部分，在AngularJS中:
- 即AngularJS的Controller；
- 可初始化Model数据；
- 为Model添加行为方法。

MVVM模式

有另一种观点，将AngularJS视为MVVM模式。MVVM模式将“双向绑定”的思想作为核心，切断了View和Model之间的联系，View、Model完全通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据变化会同时引起数据源数据的变化，数据源数据的变化也会立即反映到视图上。MVVM模式和MVC模式最大的区别是：模型中的数据一旦变化，会自动影响视图，不需要控制器协调。

M: Model, 即数据模型, 在AngularJS中:
- 为scope中的各个数据对象;
V: View, 即视图, 在AngularJS中:
- 为HTML页面;
VM: ViewModel, 即视图模型, 在AngularJS中:
- 为scope对象;
在AngularJS中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层。

指令

所谓的指令就是AngularJS对HTML的更改、补丁，其中ng是AngularJS的简写，也是内置指令的标记。

ng-app

表示AngularJS操作的范围；
一个页面上仅能出现一个ng-app指令，若有多个ng-app指令，则后续的ng-app不工作；
ng-app若加在html标签上，则表示AngularJS控制了全页面，AngularJS会等待ng-app指令标签中的所有东西都加载后再执行，所以AngularJS的JavaScript文件在head或者body导入均可。

<!DOCTYPE html>
<html ng-app>
<head>
	<title>hello world</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
    {{ 1 + 2 }}
</body>
</html>

ng-init

用于声明变量，该指令的属性值可声明一个或者多个变量，多个变量直接用逗号隔开即可。

<div ng-init="num=5">
    {{num * num}}
</div>

ng-bind

将表达式的值绑定到HTML元素上（如<span../>，<div../>等）。

<p ng-bind="2 * 5"></p>

ng-style

表示给HTML元素加上样式，常见有如下三种写法。

写法一：

<div ng-style="{background:red;}"></div>

写法二：

//...
myapp.controller("MainCtrl", [function(){
    this.style = {background:red;};
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
    <div ng-style="mainctrl.style"></div>
</body>

写法三：

//...
myapp.controller("MainCtrl", [function(){
    this.getStyle = function{
        return {background:red;};
    };
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
    <div ng-style="mainctrl.getStyle()"></div>
</body>

注意：如果控制器中的某一个值由其他值决定，并且希望其他值改变的时候，这个值也能改变，此时要写成函数return的形式。

ng-repeat

表示重复一个HTML标签。

语法格式为：

<div ng-repeat="变量名 in 数组数据"></div>  //变量将自动按顺序迭代数组数据中的每一项。

ng-options

ng-options可以智能地从控制器中取值当做选项。注意，使用ng-options的下拉菜单必须有ng-model属性与控制器双向绑定。

在下面select代码块中实现了下拉菜单的功能，option标签实现了下拉项，页面显示的是诸如“满意”之类的文字，存入数据库的是诸如“10”之类的value值。

<select name="" id="">
    <option value="10">非常满意</option>
    <option value="8">比较满意</option>
    <option value="6">满意</option>
    <option value="4">比较不满意</option>
    <option value="2">稍微不满意</option>
    <option value="0">非常不满意</option>
</select>

ng-options常见的几种使用情形：

普通数组，语法格式：label for value in array，value是提交的值，label是显示的值。

<body ng-controller="MainCtrl as mainctrl">
    <select ng-model="mainctrl.label" ng-options="item for item in mainctrl.arr">
    </select>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.label = "东风";
    		this.arr = ["东风", "幺鸡", "二饼", "二条"];
    	}])
    </script>
</body>

对象作为数组元素，语法格式：value as label for item in array，value是提交的值，label是显示的值。

<body ng-controller="MainCtrl as mainctrl">
    <select ng-model="mainctrl.value" ng-options="item.id as item.city for item in mainctrl.arr">
    </select>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.value = "";
    		this.arr = [
    		{"id": "010", "city": "北京"},
    		{"id": "029", "city": "西安"},
    		{"id": "0311", "city": "石家庄"},
    		{"id": "0312", "city": "保定"}];
    	}])
    </script>
</body>

普通对象，语法格式value as label for (label, value) in array，value是提交的值，label是显示的值。

<body ng-controller="MainCtrl as mainctrl">
    <select ng-model="mainctrl.value" ng-options="value as key for (key, value) in mainctrl.arr">
    </select>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.value = "";
    		this.arr = {
    		"广东":"粤",
    		"福建":"闽",
    		"江西":"赣",
    		"山东":"鲁",
    		"河北":"冀"
    	}
    }])
    </script>
</body>

表达式

{{}}是AngularJS的表达式模板定位符，主要用于在HTML页面上产生输出，里面可以填写AngularJS的表达式，表达式只能是简单运算，包括加、减、乘、除、求模、三目运算等，但不能是函数、循环、判断、赋值等复杂语句。

模块

AngularJS的模块加载分为两种情况。

匿名模块

就是没有为ng-app指定属性值或属性值为空字符串），此时AngularJS可以自动加载并创建AngularJS模块。
命名模块

为 ng-app 指定了属性值，该属性值就是该模块的名称），此时必须调用angular对象的module（）方法来创建AngularJS模块。

控制器

AngularJS使用装饰者模式创建控制器，即首先创建一个对象，然后不断丰富对象的内容；
控制器是一个对象，是我们View与Model之间的桥梁；
当我们使用了ng-controller指令，内部就会创建控制器对象；
每定义一个ng-controller指令，内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象；
jQuery向外暴露了"$"这个底层变量；underscore向外暴露了"_"这个底层变量；AngularJS向外暴露了"angular"这个底层变量。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<title>Angular程序</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
    <!-- 实例化控制器MainCtrl类，并起一个别名mainctrl，控制器接管的范围为此div区域。 -->
    <div ng-controller="MainCtrl as mainctrl">
    	<h1>{{mainctrl.a}}</h1>
    	<input type="button" value="点击" ng-click="mainctrl.add()">
    </div>
    <script type="text/javascript">
        //创建一个名为app的模块，第一个参数是ng-app的名称，第二个参数是一个数组，数组里存储该模块所需的依赖。
    	var app = angular.module('myapp', []);
    	//创建一个名为MainCtrl的控制器类，第一个参数是控制器的名称，第二个参数是一个数组，描述依赖项和顺序注入到函数里面用的，数组最后一个元素是控制器的函数主程序。
    	app.controller('MainCtrl', [function(){
    		//定义一个变量a并赋值100。
    		this.a = 100;
    		//做个备份。
    		var self = this;
            //定义一个方法。
    		this.add = function(){
    			//每运行一次自增1。
                self.a++;
    		}
    	}]);
    </script>
</body>
</html>

数据绑定

AngularJS只关心数据，数据的变化会自动引起视图的变化，并且视图是局部刷新，不是整个页面刷新，AngularJS会自动识别哪里用到了这个更新的数据，这个过程叫做脏检查。

数据绑定

数据从一个地方A转移(传递)到另一个地方B的过程称为数据绑定, 这个过程由框架来完成。

View-->Model；
Model-->View。

双向数据绑定

数据可以从View(视图层)流向Model（模型）, 也可以从Model流向View。

Model<-->View：
- 当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令数据从View==>Model；
- 当Model域对象的属性发生改变时, 页面对应数据随之更新: {{}}表达式数据从Model==>View。
ng-model是双向数据绑定, 而{{}}是单向数据绑定。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<title>双向绑定</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
    <div ng-controller="MainCtrl as mainctrl">
    	{{mainctrl.a}}
    	<br/><input type="text" ng-model="mainctrl.a">
    </div>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.a = 100;
    	}])
    </script>
</body>
</html>

单向数据绑定

数据只能单方向流动。

View-->Model ： ng-init；
Model-->View : {{name}}；
ng-init用来初始化当前的作用域变量。

依赖注入

依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。

依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。

<script type="text/javascript">
    function(event) {
        alert(event.clientX);
    }
</script>

上图所示代码块中，event对象就是以依赖注入的方式进来使用的依赖对象。

AngularJS的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用，这其中形参必须是特定的名称（‘$scope’）, 否则AngularJS无法注入，将抛出异常。

<script type="text/javascript">
  function MyController($scope) {
  }
</script>

AngularJS中如果要发出Ajax请求，此时需要使用内置$http服务，所有的内置服务都是$开头的，使用依赖注入的语法引入到控制器中。

<script type="text/javascript">
    var app = angular.module('myapp', []);
    app.controller('MainCtrl', ["$http", function($http){}]);
</script>

声明式编程和命令式编程

命令式编程

命令“机器”如何去作事情(how)，这样无论你想要的是什么(what)，它都会按照你的命令实现，更注重执行的过程，可类比为解答题。

var arr = [1,2,3,4,5];
var newArr = [];
for(var i=0;i<arr.length;i++){
  var num = arr[i]*2;
  newArr.push(num);
}
console.log(newArr);

声明式编程

告诉“机器”你想要的是什么(what)，让机器想出如何去作(how) ，更注重执行的结果，可类比为填空题。

var newArr2 = arr.map(function (item) {
  return item*2;
});
console.log(newArr2);

案例集锦

调色板

通过滑块和文本框改变色块颜色。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <title>调色板</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            border:1px solid #333;
        }
    </style>
    <script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
    <div class="box" ng-style="mainctrl.getColor()"></div>
    <p>
        r:
        <input type="range" min="0" max="255" ng-model="mainctrl.r">
        <input type="number" min="0" max="255" ng-model="mainctrl.r">
    </p>
    <p>
        g:
        <input type="range" min="0" max="255" ng-model="mainctrl.g">
        <input type="number" min="0" max="255" ng-model="mainctrl.g">
    </p>
    <p>
        b:
        <input type="range" min="0" max="255" ng-model="mainctrl.b">
        <input type="number" min="0" max="255" ng-model="mainctrl.b">
    </p>
    <p>
        a:
        <input type="range" min="0" max="1" step="0.01" ng-model="mainctrl.a">
        <input type="number" min="0" max="1" step="0.01" ng-model="mainctrl.a">
    </p>  
    <script type="text/javascript">
        var app = angular.module("myapp", []);
        app.controller('MainCtrl', [function(){
            this.r = 100;
            this.g = 100;
            this.b = 100;
            this.a = 0.38;
            this.getColor = function(){
                return {"background-color":"rgb(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")"};
            }
        }]);
    </script>
</body>
</html>

模拟微博发布框

限制发送字数最多为140字，并且能够实时提醒用户写了多少个字，当超过140字时，数字变红，同时发布按钮无法点击。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<title>模拟微博发布框</title>
	<meta charset="utf-8" />
	<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
    <p>
    	<textarea cols="30" rows="10" placeholder="请输入内容" ng-model="mainctrl.txt"></textarea>
    	<span ng-style="mainctrl.getColor()">{{mainctrl.txt.length}}/140字</span>
    </p>
    <p>
    	<input type="button" value="发布" ng-disabled="mainctrl.txt.length > 140"/>
    	<input type="button" value="清空" ng-click="mainctrl.reset()" ng-disabled="mainctrl.txt.length == 0"/>
    </p>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.txt = "";
    		var self = this;
    		this.getColor = function(){
                return self.txt.length >= 140 ? {"color": "red"} : {"color": "#333"};
    		};
    		this.reset = function(){
    			self.txt = "";
    		}
    	}]);
    </script>
</body>
</html>

模拟表格

<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<title>模拟表格</title>
	<meta charset="utf-8" />
	<style type="text/css">
	    .table_wrap{
	    	width: 600px;
	    	margin: 0 auto;
	    }
		table, tr, td, th{
			border-bottom: 1px solid #333;
			border-collapse: collapse;
		}
		th{
			cursor: pointer;
		}
		th, td{
			width: 20%;
			line-height: 150%;
		}
		tr:nth-child(2n){
			background-color: #eee;
		}
		.form_box{
			background-color: skyblue;
			padding: 10px;
			width: 400px;
			margin-top: 10px;
		}
	</style>
	<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
    <div class="table_wrap">
    	<table>
	    	<tr>
	    		<th ng-click="mainctrl.changeSort('sid')">
	    			学号 
	    			<span ng-show="mainctrl.sortBy == 'sid'">{{mainctrl.getSortSign()}}
	    			</span>
	    		</th>
	    		<th ng-click="mainctrl.changeSort('name')">
	    			姓名 
	    			<span ng-show="mainctrl.sortBy == 'name'">{{mainctrl.getSortSign()}}
	    			</span>
	    		</th>
	    		<th ng-click="mainctrl.changeSort('Chinese')">
	    			语文成绩 
	    			<span ng-show="mainctrl.sortBy == 'Chinese'">{{mainctrl.getSortSign()}}
	    			</span>
	    		</th>
	    		<th ng-click="mainctrl.changeSort('Math')">	
	    			数学成绩 
	    			<span ng-show="mainctrl.sortBy == 'Math'">{{mainctrl.getSortSign()}}
	    			</span>
	    		</th>
	    		<th ng-click="mainctrl.changeSort('English')">
	    			英语成绩 
	    			<span ng-show="mainctrl.sortBy == 'English'">{{mainctrl.getSortSign()}}
	    			</span>
	    		</th>
	    		<th>删除</th>
	    	</tr>
	    	<tr ng-repeat="item in mainctrl.data">
	    		<td>{{item.sid}}</td>
	    		<td>{{item.name}}</td>
	    		<td>{{item.Chinese}}</td>
	    		<td>{{item.Math}}</td>
	    		<td>{{item.English}}</td>
	    		<td><input type="button" value="删除" ng-click="mainctrl.delete(item.sid)"></td>
	    	</tr>
        </table>
    </div>
    <div class="form_box">  
    	<p>
    		学号：<input type="text" ng-model="mainctrl.form_obj.sid">
    	</p>
    	<p>
    		姓名：<input type="text" ng-model="mainctrl.form_obj.name">
    	</p>
    	<p>
    		语文：<input type="text" ng-model="mainctrl.form_obj.Chinese">
    	</p>
    	<p>
    		数学：<input type="text" ng-model="mainctrl.form_obj.Math">
    	</p>
    	<p>
    		英语：<input type="text" ng-model="mainctrl.form_obj.English">
    	</p>
    	<p>
    		<input type="button" value="插入" ng-click="mainctrl.add()">
    	</p>
    </div>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.data = [
    		    {"sid":1002, "name":"小黎", "Chinese":102, "Math":134, "English":109},
    		    {"sid":1003, "name":"小东", "Chinese":112, "Math":114, "English":112},
    		    {"sid":1004, "name":"小董", "Chinese":132, "Math":105, "English":111},
    		    {"sid":1005, "name":"小烈", "Chinese":92, "Math":134, "English":144},
    		]
    		//表单对象，供双向数据绑定用的。AngularJS不能碰DOM，它改变的是数据，数据变化了，DOM自动变化。
    		this.form_obj = {};
    		//数据备份。
    		var self = this;
    		//增加
    		this.add = function(){
    			self.data.push(self.form_obj);
    			self.form_obj = {};
    		};
            //删除
    		this.delete = function(sid){
                for(var i = 0; i < self.data.length; i++){
                	if(self.data[i].sid == sid){
                		self.data.splice(i, 1);
                	}
                }
    		};
    		//按谁排序
    		this.sortBy = "sid";
    		//升序还是降序,true表示升序
    		this.asc = true;
            
    		this.getSortSign = function(){
                 return self.asc ? "▼" : "▲";
    		};
            //排序
            this.changeSort = function(key_name){
            	if(key_name == self.sortBy){
            		self.asc = !self.asc;
            	}else{
                    self.sortBy = key_name;
                    self.asc = true;
            	}
            	self.data.sort(function(a, b){
            		if(a[self.sortBy] > b[self.sortBy]){
            			return self.asc ? 1 : -1;
            		}else{
            			return self.asc ? -1 : 1;
            		}
            	})
            };
    	}]);
    </script>
</body>
</html>

表单验证

两个条件

需要验证的控件必须有ng-model属性；
form必须有name属性。

要想验证表单，必须符合上面两个条件；只要符合上面两个条件，表单就开始验证了。

<body ng-controller="MainCtrl as mainctrl">
    <form name="myform">
    	<p>
    		姓名：<input type="text" required ng-model="mainctrl.formobj.name">
    	</p>
    </form>
    <script type="text/javascript">
    	var app = angular.module('myapp', []);
    	app.controller('MainCtrl', [function(){
    		this.formobj = {};
    	}])
    </script>
</body>

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <title>表单验证</title>
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        font-size: 16px;
        font-family: "微软雅黑";
      }
      span {
        font-size: 12px;
      }
      .passwordstrengthbar {
        width: 100px;
        height: 20px;
      }
      .s1 {
        background-color: red;
      }
      .s2 {
        background-color: orange;
      }
      .s3 {
        background-color: yellow;
      }
      .s4 {
        background-color: lightseagreen;
      }
      .s5 {
        background-color: green;
      }
    </style>
    <script
      type="text/javascript"
      src="js/lib/angularjs/angular.min.js"
    ></script>
  </head>
  <body ng-controller="MainCtrl as mainctrl">
    {{mainctrl.formobj}}
    <form name="myform">
      <p>
        *姓名：<input
          type="text"
          required
          name="name"
          ng-model="mainctrl.formobj.name"
          ng-pattern="/^([\u4e00-\u9fa5]{2,20}|[a-zA-Z.\s]{2,20})$/"
        />
        <span ng-show="myform.name.$dirty && myform.name.$error.required"
          >请填写用户名</span
        >
        <span ng-show="myform.name.$error.pattern">不合法的姓名</span>
      </p>
      <p>
        *年龄：
        <input
          type="number"
          name="age"
          required
          ng-model="mainctrl.formobj.age"
          min="7"
          max="18"
        />
        <span ng-show="myform.age.$dirty && myform.age.$error.required"
          >请填写年龄</span
        >
        <span ng-show="myform.age.$error.max">最大为18岁</span>
        <span ng-show="myform.age.$error.min">最小为7岁</span>
      </p>
      <p>
        *密码：
        <input
          type="password"
          name="password"
          required
          ng-model="mainctrl.formobj.password"
          ng-minlength="6"
        />
        <span
          ng-show="myform.password.$dirty && myform.password.$error.required"
          >请填写密码</span
        >
        <span ng-show="myform.password.$error.minlength">最短长度6位</span>
        <span ng-show="mainctrl.passwordScore < 3">密码强度不够</span>
      </p>
      <p
        class="passwordstrengthbar"
        class="s5"
        ng-class="mainctrl.getStrengthClass()"
        ng-show="myform.password.$valid"
      >
        {{mainctrl.passwordtip}}
      </p>
      <p>
        网址：
        <input type="url" name="url" ng-model="mainctrl.formobj.url" />
        <span ng-show="myform.url.$error.url">网址格式不正确</span>
      </p>
      <p>
        <input
          type="button"
          value="提交"
          ng-disabled="myform.$invalid || mainctrl.passwordScore < 3"
        />
      </p>
    </form>
    <script type="text/javascript">
      var app = angular.module("myapp", []);
      function checkStrength(password) {
        var lv = 0;
        if (!password) {
          return;
        }
        if (password.match(/[a-z]/g)) {
          lv++;
        }
        if (password.match(/[0-9]/g)) {
          lv++;
        }
        if (password.match(/([A-Z])/g)) {
          lv++;
        }
        if (password.match(/([\!\@\#\$\%\^\&\*\?\/\|\\])/g)) {
          lv += 2;
        }
        if (password.length < 6) {
          lv = 0;
        }
        if (lv > 5) {
          lv = 5;
        }
        return lv;
      }
      app.controller("MainCtrl", [
        function () {
          this.formobj = {};
          this.passwordtip = "";
          this.getStrengthClass = function () {
            this.passwordScore = checkStrength(this.formobj.password);
            console.log(this.passwordScore);
            if (this.passwordScore == 1) {
              this.passwordtip = "不安全";
            } else if (this.passwordScore == 2) {
              this.passwordtip = "较不安全";
            } else if (this.passwordScore == 3) {
              this.passwordtip = "安全";
            } else if (this.passwordScore == 4) {
              this.passwordtip = "较安全";
            } else if (this.passwordScore == 5) {
              this.passwordtip = "特别安全";
            }
            return "s" + this.passwordScore;
          };
        },
      ]);
    </script>
  </body>
</html>

Angularjs 的 gt lt mainctrl Angular

有关Angularjs的重要概念的更多相关文章

ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时，没有路由匹配 [OPTIONS] "/users" - 2
尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg
ruby - Camping 和 Sinatra 之间有什么重要区别吗？ - 2
我的感觉是Camping和Sinatra之间的差异不是很大，您可以安全地选择其中任何一个并且没问题。但我想问问Ruby专家，这是不是真的。Sinatra和Camping微框架之间实际上有什么重要区别吗？您将如何决定使用哪一个？最佳答案我知道的唯一显着区别是Camping像Rails一样基于MVC模式，并且与ActiveRecord耦合。Sinatra更加不可知。Camping也不再维护，而Sinatra正在积极开发中。仅这一点就足以让我们先看看Sinatra。编辑:感谢Philippe的更正，很高兴听到Camping的开发正在进
ruby - =~ 运算符的顺序重要吗？ - 2
下面两个语句除了编码风格有区别吗？/regex/=~"some_string_with_regex""some_string_with_regex"=~/regex/ 最佳答案是的，有区别。正如在http://www.ruby-doc.org/core/classes/Regexp.html#M001232中提到的If=~isusedwitharegexpliteralwithnamedcaptures,capturedstrings(ornil)isassignedtolocalvariablesnamedbythecaptur
WebSocket的那些事（1-概念篇） - 2
目录一、什么是Websocket二、WebSocket部分header介绍三、HTTPVSWebSocket四、什么时候使用WebSockets五、关于SockJS和STOMP一、什么是Websocket根据RFC6455标准，Websocket协议提供了一种标准化的方式在客户端和服务端之间通过TCP连接建立全双工、双向通信渠道。它是一种不同于HTTP的TCP协议，但是被设计为在HTTP基础上运行。Websocket交互始于HTTP请求，该请求会通过HTTPUpgrade请求头去升级请求，进而切换到Websocket协议。请求报文如下：GET/spring-websocket-portfoli
半个月狂飙1000亿，ChatGPT概念股凭什么？ - 2
ChatGPT掀起了AI股历史上最疯狂的一轮市值狂飙。自春节后至今，ChatGPT概念股开始了暴走模式，短短半月时间，海天瑞声、开普云等ChatGPT概念股市值累计增加了近1400亿。如此的爆炸效应，得益于ChatGPT所展现出商业化落地的巨大潜力。要知道，在此之前，无论是十年AI投入超千亿的百度，还是困在硬件化里的AI四小龙，都在重复着AI商业化难落地的故事。ChatGPT的出现，让AI从生产力的赋能者直接成为一种创造生产力的工具。随着订阅模式的推出，ChatGPT已经成为第一个以AI技术为核心直接变现的消费者应用。本文持有以下核心观点：1、ChatGPT是AI技术迭代的受益者。过去受限技术
ruby-on-rails - 为什么初始化变量如此重要？ - 2
有人可以向我解释一下，为什么不初始化first_idx和last_idx会导致代码无法运行？？当我运行它时，出现此错误“未定义的局部变量或方法last_idx”。我知道建议总是初始化变量，但我不明白为什么。毕竟first_idx和last_idx总是会在循环中得到一个值，因为参数letter总是出现在字符串中(在这个特定问题中)。我真的很感激一些(简单的)见解。谢谢!P.S，我也知道在Ruby中使用#index和#rindex很容易解决这个问题，但我不允许使用直接的方法来解决它。deffind_for_letter(string,letter)first_idx=nil0.upto(s
ruby - 在 Ruby 的正则表达式中，前瞻和后视概念如何支持这种零宽度断言概念？ - 2
我刚刚经历了这个概念Zero-WidthAssertions从文档中。我想到了一些快速的问题-为什么这样的名字Zero-WidthAssertions?Look-ahead怎么了和look-behind概念支持这样的Zero-WidthAssertions概念？什么这样的?,,=s,-4个符号在模式内指示？你能帮我集中精力了解实际发生的事情我还尝试了一些小代码来理解逻辑，但对它们的输出没有那么自信:irb(main):001:0>"foresight".sub(/(?!s)ight/,'ee')=>"foresee"irb(main):002:0>"foresight".sub(/(?
ruby-on-rails - 为什么学习 Ruby 中的元编程和特征类很重要？ - 2
我目前正在尝试使用Ruby和Rails，我已经阅读了有关元编程的教程和书籍中的几个部分。许多人提到它是Ruby的重要组成部分，但他们并没有真正深入到细节。就好像元编程是Ruby程序员的最后边界。我有.NET背景，很难理解为什么它被认为如此有用。使用元编程有什么好处？什么是特征类，它与单例有何不同？在什么情况下使用元编程很常见？使用代码修改其他代码(尤其是非您自己的代码)的行为有哪些伦理含义？最佳答案使用元编程有什么好处？您可以创建比没有它更具表现力的API(例如，ActiveRecord使用元编程根据表的列名定义访问器方法，因此
ruby - 有哪些重要的 Ruby 命令？ - 2
关闭。这个问题需要更多focused.它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题editingthispost.关闭8年前。Improvethisquestion我不确定所有这些，但是执行更新Ruby、下载新gem或更新现有gem等操作的命令是什么？还有哪些重要的事情？因为这可能很重要，所以我运行的是Windows。
涡旋光束基本概念介绍 - 2
涡旋光束及其MATLAB实现前言涡旋光束的基本概念常见的涡旋涡旋光束涡旋光束的产生方法前言笔者新开一块专栏，专门用于讨论整理总结涡旋光束的相关内容，从基本的概念出发，推导相关的公式，并结合MATLAB进行相关的仿真，不清楚这个专栏会更新多少期，我会分享部分的代码，全部的代码有需要的话可以私聊我。当然大家对这个专栏感兴趣的话，欢迎积极交流。涡旋光束的基本概念涡旋光束(vortexbeam)是指携带光学涡旋，具有exp(imϕ)exp(im\phi)exp(imϕ)相位分布的光束，其中mmm表示相位拓扑电荷数，ϕ\phiϕ是柱坐标下的方位角。之前的分享中笔者已经说明了部分的激光光束的表达式，想要

Angularjs的重要概念

AngularJS的重要概念

MVC模式

MVVM模式

指令

ng-app

ng-init

ng-bind

ng-style

ng-repeat

ng-options

表达式

模块

控制器

数据绑定

数据绑定

双向数据绑定

单向数据绑定

依赖注入

声明式编程和命令式编程

命令式编程

声明式编程

案例集锦

调色板

模拟微博发布框

模拟表格

表单验证

两个条件

有关Angularjs的重要概念的更多相关文章

随机推荐