整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于封裝的原則，API 的設(shè)計(jì)者會(huì)將部分成員（屬性、字段、方法等）隱藏以保證健壯性。但總有需要直接訪問這些私有成員的情況。
為了訪問一個(gè)類型的私有成員，除了更改 API 還有就是使用反射技術(shù)：
public class MyApi
{
public MyApi()
{
_createdAt = DateTime.Now;
}
private DateTime _createdAt;
public int ShowTimes { get; private set; }
public void ShowCreateTime()
{
Console.WriteLine(_createdAt);
ShowTimes++;
}
}
void Main()
{
var api = new MyApi();
var field = api.GetType().GetField("_createdAt", BindingFlags.NonPublic | BindingFlags.Instance);
var value = field.GetValue(api);
Console.WriteLine(value);
}這種寫法并不優(yōu)雅：
筆者基于“動(dòng)態(tài)類型技術(shù)”探索出了一種相對(duì)來(lái)說比較優(yōu)雅的方案用于美化上述代碼，并為其命名為 ReflectionDynamicObject ：
void Main()
{
var api = new MyApi();
dynamic wrapper = ReflectionDynamicObject.Wrap(api);
Console.WriteLine(wrapper._createdAt);
}除了支持獲取值，ReflectionDynamicObject 還支持賦值：
void Main()
{
var api = new MyApi();
dynamic wrapper = ReflectionDynamicObject.Wrap(api);
wrapper._createdAt = new DateTime(2022, 2, 2, 22, 22, 22);
api.ShowCreateTime();
}除了字段，當(dāng)然也支持對(duì)屬性的操作：
void Main()
{
var api = new MyApi();
dynamic wrapper = ReflectionDynamicObject.Wrap(api);
wrapper.ShowTimes = 100;
Console.WriteLine(wraper.ShowTimes);
}在對(duì)屬性的支持上，ReflectionDynamicObject 使用了“快速反射”技術(shù)，將取值和復(fù)制操作生成了委托以優(yōu)化性能。
ReflectionDynamicObject 派生自 DynamicObject ，其內(nèi)部通過反射技術(shù)獲取到所有的屬性和字段并對(duì)其 getter 和 setter 方法進(jìn)行存儲(chǔ)并通過 TryGetMember 和 TrySetMember 方法經(jīng)運(yùn)行時(shí)調(diào)用。
public sealed class ReflectionDynamicObject : DynamicObject
{
private readonly object _instance;
private readonly Accessor _accessor;
private ReflectionDynamicObject(object instance)
{
_instance = instance ?? throw new ArgumentNullException(nameof(instance));
_accessor = GetAccessor(instance.GetType());
}
public static ReflectionDynamicObject Wrap(Object value)
{
if (value == null) throw new ArgumentNullException(nameof(value));
return new ReflectionDynamicObject(value);
}
public override bool TryGetMember(GetMemberBinder binder, out object result)
{
if (_accessor.TryFindGetter(binder.Name, out var getter))
{
result = getter.Get(_instance);
return true;
}
return base.TryGetMember(binder, out result);
}
public override bool TrySetMember(SetMemberBinder binder, object value)
{
if (_accessor.TryFindSetter(binder.Name, out var setter))
{
setter.Set(_instance, value);
return true;
}
return base.TrySetMember(binder, value);
}
#region 快速反射
private interface IGetter
{
object Get(object instance);
}
private interface ISetter
{
void Set(object instance, object value);
}
private class Getter : IGetter
{
private FieldInfo _field;
public Getter(FieldInfo field)
{
_field = field ?? throw new ArgumentNullException(nameof(field));
}
public object Get(object instance)
{
return _field.GetValue(instance);
}
}
private class Setter : ISetter
{
private FieldInfo _field;
public Setter(FieldInfo field)
{
_field = field ?? throw new ArgumentNullException(nameof(field));
}
public void Set(object instance, object value)
{
_field.SetValue(instance, value);
}
}
private class Getter<T1, T2> : IGetter
{
private readonly Func<T1, T2> _getter;
public Getter(Func<T1, T2> getter)
{
_getter = getter ?? throw new ArgumentNullException(nameof(getter));
}
public object Get(object instance)
{
return _getter((T1)instance);
}
}
private class Setter<T1, T2> : ISetter
{
private readonly Action<T1, T2> _setter;
public Setter(Action<T1, T2> setter)
{
this._setter = setter ?? throw new ArgumentNullException(nameof(setter));
}
public void Set(object instance, object value)
{
this._setter.Invoke((T1)instance, (T2)value);
}
}
private class Accessor
{
public Accessor(Type type)
{
this._type = type ?? throw new ArgumentNullException(nameof(_type));
var getter = new SortedDictionary<string, IGetter>();
var setter = new SortedDictionary<string, ISetter>();
var fields = _type.GetFields(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic);
foreach (var field in fields)
{
getter[field.Name] = new Getter(field);
setter[field.Name] = new Setter(field);
}
var props = _type.GetProperties(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic);
foreach (var item in props)
{
if (item.CanRead)
{
var method = item.GetMethod;
var funcType = typeof(Func<,>).MakeGenericType(item.DeclaringType, item.PropertyType);
var func = method.CreateDelegate(funcType);
var getterType = typeof(Getter<,>).MakeGenericType(item.DeclaringType, item.PropertyType);
var get = (IGetter)Activator.CreateInstance(getterType, func);
getter[item.Name] = get;
}
if (item.CanWrite)
{
var method = item.SetMethod;
var actType = typeof(Action<,>).MakeGenericType(item.DeclaringType, item.PropertyType);
var act = method.CreateDelegate(actType);
var setterType = typeof(Setter<,>).MakeGenericType(item.DeclaringType, item.PropertyType);
var set = (ISetter)Activator.CreateInstance(setterType, act);
setter[item.Name] = set;
}
}
_getters = getter;
_setters = setter;
}
private readonly Type _type;
private readonly IReadOnlyDictionary<string, IGetter> _getters;
private readonly IReadOnlyDictionary<string, ISetter> _setters;
public bool TryFindGetter(string name, out IGetter getter) => _getters.TryGetValue(name, out getter);
public bool TryFindSetter(string name, out ISetter setter) => _setters.TryGetValue(name, out setter);
}
private static Dictionary<Type, Accessor> _accessors = new Dictionary<Type, Accessor>();
private static object _accessorsLock = new object();
private static Accessor GetAccessor(Type type)
{
if (_accessors.TryGetValue(type, out var accessor)) return accessor;
lock (_accessorsLock)
{
if (_accessors.TryGetValue(type, out accessor)) return accessor;
accessor = new Accessor(type);
var temp = new Dictionary<Type, Accessor>(_accessors);
temp[type] = new Accessor(type);
_accessors = temp;
return accessor;
}
}
#endregion
}基于復(fù)雜度的考慮，ReflectionDynamicObject 并未添加對(duì)“方法”的支持。這也就意味著對(duì)方法的調(diào)用是缺失的。雖然動(dòng)態(tài)行為讓程序擺脫了對(duì)字符串的依賴，但是該實(shí)現(xiàn)對(duì)“重構(gòu)”的支持仍然不友好。
Liquid 主題引擎 是筆者根據(jù) Liquid 語(yǔ)言和 Shopify 主題機(jī)制并采用 Fluid 模板引擎實(shí)現(xiàn)的一套 HTML 主題引擎。該引擎允許最終用戶自由地修改自己的主題模板而不會(huì)對(duì)宿主造成影響。最終目標(biāo)是做到多語(yǔ)言、多主題、高擴(kuò)展性以及所見即所得。
在編寫 Liquid 主題引擎 時(shí)，筆者需要重寫 Fluid 模板引擎的 render 標(biāo)簽讓子視圖從 snippets 文件夾加載。在實(shí)現(xiàn)該標(biāo)簽時(shí)，需要訪問 TemplateContext 的 LocalScope 和 RootScope 字段，不幸的是上述字段被標(biāo)記為了 internal ，無(wú)法在外部程序集中訪問到。于是便有了 ReflectionDynamicObject ，幫助筆者完成對(duì) LocalScope 和 RootScope 的訪問。
們整理了一份主要的Angular面試問題清單，分為三部分：
| 特征 | AngularJS | Angular |
|---|---|---|
| 建筑 | 支持MVC設(shè)計(jì)模型 | 使用組件和指令 |
| 語(yǔ)言 | 推薦語(yǔ)言：JavaScript | 推薦語(yǔ)言：TypeScript |
| 表達(dá)式語(yǔ)法 | 圖片/屬性和事件需要特定的ng指令 | 使用（）綁定事件，使用[]進(jìn)行屬性綁定 |
| 行動(dòng)支援 | 不提供任何移動(dòng)支持 | 提供移動(dòng)支持 |
| 路由 | $ routeprovider.when（）用于路由配置 | @RouteConfig {（…）}用于路由配置 |
| 依賴注入 | 不支持依賴注入的概念 | 支持基于樹的單向更改檢測(cè)的分層依賴注入 |
| 結(jié)構(gòu)體 | 難以管理 | 簡(jiǎn)化的結(jié)構(gòu)，使大型應(yīng)用程序的開發(fā)和維護(hù)更加容易 |
| 速度 | 通過雙向數(shù)據(jù)綁定，開發(fā)工作和時(shí)間得以減少 | 升級(jí)功能比AngularJS更快 |
| 支持 | 不再提供支持或新的更新 | 積極的支持和頻繁的新更新 |
Angular是一個(gè)開放源代碼的前端Web框架。它是最流行的JavaScript框架之一，主要由Google維護(hù)。它提供了一個(gè)輕松開發(fā)基于Web的應(yīng)用程序的平臺(tái)，并使前端開發(fā)人員能夠管理跨平臺(tái)應(yīng)用程序。它集成了強(qiáng)大的功能，例如聲明性模板，端到端工具，依賴項(xiàng)注入以及各種其他使開發(fā)路徑更流暢的最佳實(shí)踐。
下面列出了使用Angular框架的一些主要優(yōu)點(diǎn)：
Angular通常用于表示單頁(yè)應(yīng)用程序的SPA的開發(fā)。Angular提供了一組現(xiàn)成的模塊，可簡(jiǎn)化單頁(yè)應(yīng)用程序的開發(fā)。不僅如此，Angular還具有內(nèi)置數(shù)據(jù)流，類型安全性和模塊化CLI的功能，被認(rèn)為是成熟的Web框架。
角表達(dá)式是類似于JavaScript的代碼段，通常放在諸如{{expression}}之類的綁定中。這些表達(dá)式用于將應(yīng)用程序數(shù)據(jù)綁定到HTML
語(yǔ)法：{{expression}}
Angular中的模板是使用包含特定于Angular的元素和屬性的HTML編寫的。這些模板與來(lái)自模型和控制器的信息結(jié)合在一起，進(jìn)一步渲染這些信息以向用戶提供動(dòng)態(tài)視圖。
Angular中的字符串插值是一種特殊的語(yǔ)法，它在雙花括號(hào) {{}}中使用模板表達(dá)式來(lái)顯示組件數(shù)據(jù)。它也稱為小胡子語(yǔ)法。JavaScript表達(dá)式包含在花括號(hào)中，由Angular執(zhí)行，然后將相對(duì)輸出嵌入HTML代碼中。這些表達(dá)式通常像表一樣進(jìn)行更新和注冊(cè)，作為摘要循環(huán)的一部分。
使用Reflect Metadata庫(kù)，角度注釋是類的“唯一”元數(shù)據(jù)集。它們用于創(chuàng)建“注釋”數(shù)組。另一方面，裝飾器是用于分離裝飾或修改類的設(shè)計(jì)模式，而無(wú)需實(shí)際更改原始源代碼。
控制器是JavaScript函數(shù)，可為HTML UI提供數(shù)據(jù)和邏輯。顧名思義，它們控制數(shù)據(jù)如何從服務(wù)器流到HTML UI。
Angular中的范圍是一個(gè)引用應(yīng)用程序模型的對(duì)象。它是表達(dá)式的執(zhí)行上下文。范圍以模仿應(yīng)用程序DOM結(jié)構(gòu)的層次結(jié)構(gòu)排列。范圍可以監(jiān)視表達(dá)式并傳播事件。
Angular的核心功能是指令，這些屬性使您可以編寫 特定于應(yīng)用程序的新HTML語(yǔ)法。它們本質(zhì)上是在Angular編譯器在DOM中找到它們時(shí)執(zhí)行的函數(shù)。Angular指令分為三部分：
在Angular中，數(shù)據(jù)綁定是最強(qiáng)大，最重要的功能之一，可讓您定義組件與DOM（文檔對(duì)象模型）之間的通信。它從根本上簡(jiǎn)化了定義交互式應(yīng)用程序的過程，而不必?fù)?dān)心在視圖或模板與組件之間推送和提取數(shù)據(jù)。在Angular中，數(shù)據(jù)綁定有四種形式：
Angular中的過濾器用于格式化表達(dá)式的值，以便將其顯示給用戶。這些過濾器可以添加到模板，指令，控制器或服務(wù)中。不僅如此，您還可以創(chuàng)建自己的自定義過濾器。使用它們，您可以輕松地組織數(shù)據(jù)，使數(shù)據(jù)僅在滿足特定條件時(shí)才顯示。通過使用豎線字符|，將過濾器添加到表達(dá)式中，然后是過濾器。
| 特征 | jQuery | Angular |
|---|---|---|
| DOM操作 | 是 | 是 |
| RESTful API | 沒有 | 是 |
| 動(dòng)畫支持 | 是 | 是 |
| 深層鏈接路由 | 沒有 | 是 |
| 表格驗(yàn)證 | 沒有 | 是 |
| 雙向數(shù)據(jù)綁定 | 沒有 | 是 |
| AJAX / JSONP | 是 | 是 |
提供程序是Angular中的可配置服務(wù)。這是對(duì)依賴關(guān)系注入系統(tǒng)的一條指令，它提供有關(guān)獲取依賴關(guān)系值的方式的信息。它是一個(gè)具有$ get（）方法的對(duì)象，該方法被調(diào)用以創(chuàng)建服務(wù)的新實(shí)例。提供者還可以包含其他方法，并使用$ provide來(lái)注冊(cè)新的提供者。
是的，Angular確實(shí)支持嵌套控制器的概念。需要以層次方式定義嵌套控制器，以便在視圖中使用它。
| Angular表達(dá)式 | JavaScript表達(dá)式 |
|---|---|
| 1.它們可以包含文字，運(yùn)算符和變量。 | 1.它們可以包含文字，運(yùn)算符和變量。 |
| 2.它們可以寫在HTML標(biāo)記內(nèi)。 | 2.它們不能寫在HTML標(biāo)記內(nèi)。 |
| 3.它們不支持條件，循環(huán)和異常。 | 3.它們確實(shí)支持條件，循環(huán)和異常。 |
| 4.它們支持過濾器。 | 4.他們不支持過濾器。 |
以下是使用核心Angular功能在應(yīng)用程序模塊之間進(jìn)行通信的最通用方法：
Angular中的service（）是用于應(yīng)用程序業(yè)務(wù)層的函數(shù)。它作為構(gòu)造函數(shù)運(yùn)行，并在運(yùn)行時(shí)使用'new'關(guān)鍵字調(diào)用一次。而factory（）是一個(gè)類似于service（）的函數(shù)，但功能更強(qiáng)大，更靈活。factory（）是有助于創(chuàng)建對(duì)象的設(shè)計(jì)模式。
Angular中的$ scope對(duì)象被組織成一個(gè)層次結(jié)構(gòu)，并且主要由視圖使用。它包含一個(gè)根范圍，該范圍可以進(jìn)一步包含稱為子范圍的范圍。一個(gè)根作用域可以包含多個(gè)子作用域。在這里，每個(gè)視圖都有自己的$ scope，因此由其視圖控制器設(shè)置的變量將對(duì)其他控制器隱藏。范圍層次結(jié)構(gòu)通常如下所示：
AOT代表Angular-Ahead-of-Time編譯器。它用于在構(gòu)建過程中預(yù)編譯應(yīng)用程序組件及其模板。用AOT編譯的Angular應(yīng)用程序的啟動(dòng)時(shí)間更短。同樣，這些應(yīng)用程序的組件可以立即執(zhí)行，而無(wú)需任何客戶端編譯。這些應(yīng)用程序中的模板作為代碼嵌入其組件中。它減少了下載Angular編譯器的需要，從而使您免于繁瑣的任務(wù)。AOT編譯器可以丟棄未使用的指令，這些指令會(huì)使用搖樹工具進(jìn)一步丟棄。
jQlite也稱為 jQuery lite是jQuery的子集，包含其所有功能。默認(rèn)情況下，它打包在Angular中。它幫助Angular以兼容的跨瀏覽器方式操作DOM。jQLite基本上僅實(shí)現(xiàn)最常用的功能，因此占用空間小。
Angular中的摘要周期是監(jiān)視監(jiān)視列表的過程，以跟蹤監(jiān)視變量的值的變化。在每個(gè)摘要循環(huán)中，Angular都會(huì)比較范圍模型值的先前版本和新版本。通常，此過程是隱式觸發(fā)的，但是您也可以使用$ apply（）手動(dòng)將其激活。
所有Angular應(yīng)用程序都是模塊化的，并遵循稱為NgModules的模塊化系統(tǒng)。這些容器保存著專門用于應(yīng)用程序域，工作流或一組緊密相關(guān)的功能的內(nèi)聚代碼塊。這些模塊通常包含組件，服務(wù)提供商和其他代碼文件，其范圍由包含的NgModule定義。有了模塊，代碼變得更加可維護(hù)，可測(cè)試和易讀。同樣，應(yīng)用程序的所有依賴關(guān)系通常僅在模塊中定義。
Angular支持創(chuàng)建以下內(nèi)容的自定義指令：
以下是Angular支持的各種過濾器：
依賴注入（DI）是一種軟件設(shè)計(jì)模式，其中對(duì)象作為依賴關(guān)系傳遞，而不是在組件中對(duì)其進(jìn)行硬編碼。當(dāng)您嘗試將對(duì)象創(chuàng)建的邏輯與使用對(duì)象的邏輯分開時(shí)，依賴注入的概念會(huì)派上用場(chǎng)。“ config”操作使用DI，在加載模塊以檢索應(yīng)用程序的元素時(shí)，必須預(yù)先配置DI。使用此功能，用戶可以根據(jù)自己的要求更改依賴關(guān)系。
在 單向數(shù)據(jù)綁定中，無(wú)論何時(shí)更改數(shù)據(jù)模型，“視圖”或“ UI”部分都不會(huì)自動(dòng)更新。您需要手動(dòng)編寫自定義代碼，以便在每次視圖更改時(shí)對(duì)其進(jìn)行更新。
而在雙向數(shù)據(jù)綁定中，一旦更改數(shù)據(jù)模型，則隱式更新View或UI部分。與單向數(shù)據(jù)綁定不同，這是一個(gè)同步過程。
Angular組件具有離散的生命周期，其中包含從出生到死亡過渡的不同階段。為了更好地控制這些階段，我們可以使用以下方法將其連接：
在Angular中，摘要過程稱為臟檢查。之所以調(diào)用它，是因?yàn)樗鼟呙枵麄€(gè)范圍以進(jìn)行更改。換句話說，它將所有新的作用域模型值與以前的作用域值進(jìn)行比較。由于所有監(jiān)視變量都包含在單個(gè)循環(huán)中，因此任何變量的任何更改/更新都將導(dǎo)致重新分配DOM中存在的其余監(jiān)視變量。被監(jiān)視的變量處于單個(gè)循環(huán)（摘要循環(huán)）中，任何變量的任何值更改都會(huì)在DOM中重新分配其他被監(jiān)視變量的值
| DOM | 物料清單 |
|---|---|
| 1.代表文檔對(duì)象模型 | 1.代表瀏覽器對(duì)象模型 |
| 2.表示網(wǎng)頁(yè)的內(nèi)容 | 2.在網(wǎng)頁(yè)上方工作，并包含瀏覽器屬性 |
| 3.所有對(duì)象都以樹狀結(jié)構(gòu)排列，并且只能通過提供的API來(lái)操作和訪問文檔 | 3.所有全局JavaScript對(duì)象，變量和函數(shù)都隱式地成為window對(duì)象的成員 |
| 4.處理HTML文檔 | 4.訪問和操縱瀏覽器窗口 |
| 5. W3C推薦的標(biāo)準(zhǔn)規(guī)格 | 5.每個(gè)瀏覽器都有自己的實(shí)現(xiàn) |
Angular中的編譯是指將源代碼從一種編程語(yǔ)言轉(zhuǎn)換為另一種編程語(yǔ)言的過程。通常，在Angular中，此轉(zhuǎn)換是從TypeScript到JavaScript的。這是一個(gè)隱式過程，在內(nèi)部發(fā)生。
為了在Angular應(yīng)用程序中執(zhí)行動(dòng)畫，您需要包括一個(gè)稱為Animate Library的特殊Angular庫(kù)，然后將ngAnimate模塊引用到您的應(yīng)用程序中，或者將ngAnimate作為依賴項(xiàng)添加到您的應(yīng)用程序模塊內(nèi)部。
Angular中的包含可讓您將指令的原始子代轉(zhuǎn)移到新模板內(nèi)的特定位置。ng指令指示正在使用包含的最近父指令的已包含DOM的插入點(diǎn)。諸如ng-transclude 或 ng-transclude-slot之類的屬性指令主要用于包含。
Angular中的事件是特定的指令，可幫助自定義各種DOM事件的行為。以下列出了Angular支持的事件：
在Angular中，服務(wù)是可替換對(duì)象，該對(duì)象使用依賴項(xiàng)注入連接在一起。通過將服務(wù)注冊(cè)到要在其中執(zhí)行的模塊中來(lái)創(chuàng)建服務(wù)。基本上，您可以通過三種方式創(chuàng)建角度服務(wù)。基本上，它們是在Angular中創(chuàng)建服務(wù)的三種方式：
Angular中的Singleton模式是一種很棒的模式，它限制了一個(gè)類不能被多次使用。Angular中的Singleton模式主要在依賴項(xiàng)注入和服務(wù)中實(shí)現(xiàn)。因此，如果您不使用“ new Object（）”而未將其設(shè)為單例，則將為同一對(duì)象分配兩個(gè)不同的存儲(chǔ)位置。而如果將該對(duì)象聲明為單例，則如果該對(duì)象已存在于內(nèi)存中，則將簡(jiǎn)單地將其重用。
REST表示RE表象小號(hào)大老牛逼轉(zhuǎn)讓（BOT）。REST是適用于HTTP請(qǐng)求的API（應(yīng)用程序編程接口）樣式。在這種情況下，所請(qǐng)求的URL可以精確定位需要處理的數(shù)據(jù)。然后，HTTP方法將標(biāo)識(shí)需要對(duì)請(qǐng)求的數(shù)據(jù)執(zhí)行的特定操作。因此，遵循此方法的API被稱為RESTful API。
在Angular中進(jìn)行引導(dǎo)只是初始化或啟動(dòng)Angular應(yīng)用程序。Angular支持自動(dòng)和手動(dòng)引導(dǎo)。
在Angular中，常量類似于用于定義全局?jǐn)?shù)據(jù)的服務(wù)。常量使用關(guān)鍵字“ constant”聲明。它們是使用恒定依賴性創(chuàng)建的，可以注入控制器或服務(wù)中的任何位置。
| 提供者 | 服務(wù) | 廠 |
|---|---|---|
| 提供程序是一種可以將應(yīng)用程序的一部分傳遞到app.config中的方法 | 服務(wù)是一種用于創(chuàng)建以'new'關(guān)鍵字實(shí)例化的服務(wù)的方法。 | 這是用于創(chuàng)建和配置服務(wù)的方法。在這里，您可以創(chuàng)建一個(gè)對(duì)象，向其中添加屬性，然后返回相同的對(duì)象，并將工廠方法傳遞到控制器中。 |
Angular Global API是用于執(zhí)行各種常見任務(wù)的全局JavaScript函數(shù)的組合，例如：
有一些常見的Angular Global API函數(shù)，例如：
為了在Angular中使用cookie，您需要包含一個(gè)名為ngCookies angular-cookies.js的模塊。
設(shè)置Cookies –為了以鍵值格式設(shè)置Cookies，使用“ put”方法。
cookie.set("nameOfCookie","cookieValue");獲取Cookie –為了獲取Cookie，使用了“ get”方法。
cookie.get（"nameOfCookie"）;清除Cookie –使用“刪除”方法刪除Cookie。
cookie.delete（"nameOfCookie"）;您可以使用以下任意一種來(lái)更新視圖：
ng-app指令用于定義Angular應(yīng)用程序，使我們可以在Angular應(yīng)用程序中使用自動(dòng)引導(dǎo)。它表示Angular應(yīng)用程序的根元素，通常在或標(biāo)簽附近聲明。在HTML文檔中可以定義任何數(shù)量的ng-app指令，但是只有一個(gè)Angular應(yīng)用程序可以被隱式地正式引導(dǎo)。其余應(yīng)用程序必須手動(dòng)引導(dǎo)。
例
<div ng-app=“myApp” ng-controller=“myCtrl”>
First Name :
<input type=“text” ng-model=“firstName”>
<br />
Last Name :
<input type=“text” ng-model=“l(fā)astName”>
<br>
Full Name: {{firstName + ” ” + lastName }}
</div> @Component({
selector: 'app-root',
template: `
<ng-template #template let-name='fromContext'><div>{{name}}</ng-template>
`
})
export class AppComponent implements AfterViewChecked {
@ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;
constructor() { }
ngAfterViewChecked() {
this.vc.createEmbeddedView(this._template, {fromContext: 'John'});
}
}可以使用ng-hide指令與控制器一起輕松隱藏HTML元素，以在單擊按鈕時(shí)隱藏HTML元素。
View
<div ng-controller ="MyController">
<button ng-click ="hide()">歡迎關(guān)注全棧程序員社區(qū)公眾號(hào)</ button>
<p ng-hide ="isHide">歡迎關(guān)注Java架構(gòu)師社區(qū)公眾號(hào)！</ p>
</ div>Controller
controller: function() {
this.isHide = false;
this.hide = function(){
this.isHide = true;
};
}歡迎關(guān)注 Java架構(gòu)師社區(qū)公眾號(hào).本文轉(zhuǎn)載自Java架構(gòu)師必看 ,更多內(nèi)容點(diǎn)擊查看！
基于AngularJS入門與進(jìn)階（江榮波 著）這本書的筆記
AngularJS 1.x的demo
AngularJS1.x和Angular2,4,5是不一樣的兩個(gè)東西，構(gòu)建方式，語(yǔ)法，都很多不同
每個(gè)AngularJS應(yīng)用至少會(huì)有一個(gè)名稱為$rootScope的作用域，它是AngularJS應(yīng)用的根作用域。框架中的ng-app指令，它可以出現(xiàn)在任何HTML標(biāo)簽中，用于啟動(dòng)AngularJS框架。當(dāng)AngularJS啟動(dòng)時(shí)會(huì)自動(dòng)創(chuàng)建一個(gè)根作用域?qū)ο?rootScope，當(dāng)使用ng-controller指令實(shí)例化控制器對(duì)象時(shí)，AngularJS框架會(huì)創(chuàng)建一個(gè)子作用域$scope，默認(rèn)情況下，該子作用域會(huì)繼承$rootScope作用域的所有屬。
如下代碼就是ng-init指令在$rootScope作用域?qū)ο笾行略隽藆serName屬性，然后在scopeController控制器的子作用域中取到成功輸出name:jock
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("scopeController",function ($scope,$log) {
$log.log("name:" + $scope.userName)
});
</script>
</head>
<body ng-init="userName='jock'">
<div ng-controller="scopeController"></div>
</body>
</html>
JavaScript對(duì)像繼承機(jī)制有三種
AngularJs是基于方法原型鏈繼承實(shí)現(xiàn)的，這里記錄下概念，書中原話：每個(gè)JavaScript構(gòu)造方法都有一個(gè)名稱為prototype的屬性，可以指向另一個(gè)對(duì)象。當(dāng)我們?cè)L問對(duì)象屬性時(shí)（例如obj.name），JavaScript引擎會(huì)從對(duì)象的所有屬性中查找該屬性，如果找到就返回屬性值，如果沒有找到就繼續(xù)從prototype屬性指向的對(duì)象屬性中查找，如果仍然沒有找到，則會(huì)沿著prototype鏈一直查找下去，直到prototype鏈結(jié)束或找到對(duì)象為止。
<script type="text/javascript">
function People() {
this.eat = function () {
console.log("pelple eat------------")
}
}
function Man(age) {
this.age = age;
}
// Man 的prototype屬性指向People
Man.prototype = new People();
var man = new Man("20");
console.log(man.age);
// 本身如果沒有，會(huì)找指向的prototype 對(duì)像
man.eat();
</script>
控制臺(tái)輸出
20
pelple eat------------
AngularJs繼承采用構(gòu)造方法原型繼承，在AngularJs作用域構(gòu)造方法中提供了一個(gè)$new()成員方法，用于創(chuàng)造子作用域，源碼這里就不重復(fù)了，書里面很詳細(xì)，只記錄下過程
var parent = $rootScope;
var child = parent.$new();
示例代碼
<!DOCTYPE html>
<html lang="en" ng-app="scopeApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/lib/angular/angular.js"></script>
<script type="text/javascript">
var scopeApp = angular.module("scopeApp",[]);
scopeApp.controller("fatherScope",function ($scope,$log) {
$scope.age = "18";
});
scopeApp.controller("childScope",function ($scope,$log) {
$scope.sex = "男";
console.log("name:" + $scope.userName + " "+ "age:" + $scope.age + " " + "sex:" + $scope.sex );
});
</script>
</head>
<body ng-init="userName='jock'">
<div ng-controller="fatherScope">
<div ng-controller="childScope"></div>
</div>
</body>
</html>
控制臺(tái)成功輸出
name:jock age:18 sex:男
AngularJS框架查找到ng-app指令時(shí)啟動(dòng)應(yīng)用，創(chuàng)建$rootScope作用域。然后AngularJS框架查找到第一個(gè)ng-controller指令，指向名稱為fatherScope的控制器，并調(diào)用$rootScope.$new()方法，以原型繼承的方式創(chuàng)建$rootScope作用域的子作用域?qū)ο螅ㄓ洖?scope1）。當(dāng)fatherScope構(gòu)造方法接收一個(gè)名稱為$scope的參數(shù)時(shí)，AngularJS實(shí)例化控制器對(duì)象時(shí)會(huì)把$scope1對(duì)象注入控制器對(duì)象中。接下來(lái)AngularJS繼續(xù)遍歷DOM元素，遇到第二個(gè)嵌套的ng-controller指令時(shí)調(diào)用$scope1．new()方法，以$scope1為原型創(chuàng)建子作用域（記為$scope2，$scope2作用域?qū)ο竽軌蛟L問$scope1作用域?qū)ο蟮乃袑傩裕?/p>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
