<p style="text-align: center;"><img src="https://img.php.cn/upload/image/138/691/841/1598408736489222.jpg" title="1598408736489222.jpg" alt="10 eckige Interviewfragen, die von fröhlich bis traurig reichen"></p>
<p>Obwohl es nur 10 Fragen gibt, decken sie alle Aspekte der Angular-Entwicklung ab, einschließlich grundlegender Wissenspunkte, während des Entwicklungsprozesses aufgetretener Probleme und offenerer Fragen, um das Grundniveau und die Projekterfahrung des Interviewers zu ermitteln. Wenn ich ein Interview hätte, a Wäre es vor einem Jahr definitiv ein Übergang von der Komödie zur Tragödie? (<em>PS: Die Antwort dient nur als Referenz~</em>). </p>
<p>Verwandte Tutorial-Empfehlungen: „<a href="https://www.php.cn/course/list/20.html" target="_blank">Angular-Tutorial</a>“</p>
<h3 id="item-1">1 Was ist der Unterschied zwischen <code>ng-show/ng-hide</code> und <code>ng-if</code>? </h3>
<p>Wir alle wissen, dass ng-show/ng-hide tatsächlich durch <code>display</code> versteckt und angezeigt wird. Und ng-if steuert tatsächlich das Hinzufügen und Löschen von Dom-Knoten. Wenn wir also DOM-Knoten basierend auf unterschiedlichen Bedingungen laden, ist die Leistung von ng-if besser als die von ng-show.</p>
<h3 id="item-2">2 Erklären Sie, was <code>$rootScrope</code> ist und was der Unterschied zwischen <code>$scope</code> ist. </h3>
<p>Laienhaft ausgedrückt: alle <code>$rootScrope</code>s<code>$scope</code>. <code>父亲</code></p>
<p><span class="img-wrap"><img src="https://img.php.cn/upload/image/774/670/837/1598408733715033.png" title="1598408733715033.png" alt="10 eckige Interviewfragen, die von fröhlich bis traurig reichen"></span></p>Sehen wir uns an, wie man <p> und <code>$rootScope</code> generiert. <code>$scope</code></p>Schritt 1: Angular analysiert <p> und erstellt <code>ng-app</code> im Speicher. <code>$rootScope</code></p>Schritt2: Angular kehrt zurück, um mit der Analyse fortzufahren, findet den <p>-Ausdruck und analysiert ihn in eine Variable. <code>{{}}</code></p>Schritt 3: Dann wird das Div mit <p> analysiert und auf eine Controller-Funktion verwiesen. Zu diesem Zeitpunkt wird die Controller-Funktion zu einer $scope-Objektinstanz. <code>ng-controller</code></p>3. Wie funktioniert der Ausdruck <h3 id="item-3">? <code>{{yourModel}}</code>
</h3>Es verlässt sich auf den $interpolation-Dienst. Nach der Initialisierung des Seiten-HTML werden diese Ausdrücke gefunden und markiert, sodass jedes Mal, wenn es auf ein <p> trifft, ein <code>{{}}</code> gesetzt wird. Und <code>$watch</code> gibt eine Funktion mit Kontextparametern zurück. Wenn die Funktion schließlich ausgeführt wird, befindet sich der Ausdruck <code>$interpolation</code> in diesem Bereich. <code>$parse</code></p>4. Was ist der Digest-Zyklus in Angular? <h3 id="item-4"></h3>In jedem Digest-Zyklus vergleicht Angular immer den Wert des Modells im Bereich. Im Allgemeinen wird der Digest-Zyklus automatisch ausgelöst. Wir können auch $apply verwenden, um ihn manuell auszulösen. Für tiefergehende Recherchen können Sie zu „The Digest Loop“ wechseln und sich bewerben<p>. <a href="https://www.ng-book.com/p/The-Digest-Loop-and-apply/" rel="nofollow noreferrer" target="_blank"></a>5. Wie storniere ich </p> und stoppe ein <h3 id="item-5">? Was ist der Unterschied zwischen @,=,& im Gültigkeitsbereich? <code>$timeout</code><code>$watch()</code>restrict kann separat eingestellt werden: </h3>
<p></p>
<p><code>$watch</code> passendes Attribut </p>
<h3 id="item-6"></h3>
<p></p> passendes Label <ul>
<li>
<p><code>A</code></p> passende Klasse </li>
<li>
<p><code>E</code></p> passende Annotation </li>
<li> <p><code>C</code> Natürlich können Sie mehrere Werte festlegen wie </p>, Machen Sie mehrere Übereinstimmungen. </li>
<li>Im Gültigkeitsbereich stellen @,=,& jeweils dar, wann Werte gebunden werden <p><code>M</code></p>
</li>
</ul>Erhalten Sie eine festgelegte Zeichenfolge, die Sie selbst festlegen oder mit {{yourModel}} binden können;<p> <code>AEC</code></p>
<p></p> Zwei-Wege Bindung, bindet einige Eigenschaften im Bereich; <ul>
<li>
<p><code>@</code></p> wird verwendet, um einige Ausdrücke im übergeordneten Bereich auszuführen. Üblicherweise legen wir einige Funktionen fest, die ausgeführt werden müssen</li>
<li>
<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">var customTimeout = $timeout(function () {
// your code
}, 1000);
$timeout.cancel(customTimeout);</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">// .$watch() 会返回一个停止注册的函数
function that we store to a variable
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’, function (newVal) {
if (newVal) {
// we invoke that deregistration function, to disable the watch
deregisterWatchFn();
...
}
});</pre><div class="contentsignin">Nach dem Login kopieren</div></div><code>=</code></p>Codepen-Demo: https://codepen. io/Jack_Pu/pen/NrpRBK</li><li><p><code>&</code></p></li> für Einwegbindung. </ul><blockquote><p></p>7. Nennen Sie mindestens drei Möglichkeiten, die Kommunikation zwischen verschiedenen Modulen zu implementieren? </blockquote><ul><li><p>Service<code><</code></p></li></ul>events, geben Sie die gebundenen Ereignisse an. <h3 id="item-7"></h3><ul><li>Offiziell empfohlen, Debug deaktivieren, <p></p></li><li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">angular.module(&#39;docsIsolationExample&#39;, [])
.controller(&#39;Controller&#39;, [&#39;$scope&#39;, function($scope) {
$scope.alertName = function() {
alert(&#39;directive scope &&#39;);
}
}])
.directive(&#39;myCustomer&#39;, function() {
return {
restrict: &#39;E&#39;,
scope: {
clickHandle: &#39;&&#39;
},
template: &#39;<button ng-click="testClick()">Click Me</button>&#39;,
controller: function($scope) {
$scope.testClick = function() {
$scope.clickHandle();
}
}
};
});</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p></p></li>Verwenden Sie einen Bindungsausdruck, der {{::yourModel}} ist. <li><p></p></li>Reduzieren Sie die Anzahl der Beobachter. <li><p><code>$parent</code><code>$$childHead</code>Verwenden Sie ng -wiederholen Lösungen finden Sie in diesem </p>Artikel</li><li></li><li><p>使用性能测试的小工具去挖掘你的angular性能问题，我们可以使用简单的<code>console.time()</code>也可以借助开发者工具以及<a href="https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en" rel="nofollow noreferrer" target="_blank">Batarang</a></p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">console.time("TimerName");
//your code
console.timeEnd("TimerName");</pre><div class="contentsignin">Nach dem Login kopieren</div></div><h3 id="item-9">9. 你认为在Angular中使用jQuery好么？</h3><p>这是一个开放性的问题，尽管网上会有很多这样的争论，但是普遍还是认为这并不是一个特别好的尝试。其实当我们学习Angular的时候，我们应该做到从0去接受angular的思想，数据绑定，使用angular自带的一些api，合理的路由组织和，写相关指令和服务等等。angular自带了很多api可以完全替代掉jquery中常用的api，我们可以使用<code>angular.element</code>，<code>$http</code>,<code>$timeout</code>,<code>ng-init</code>等。</p><p>我们不妨再换个角度，如果业务需求，而对于一个新人（比较熟悉jQuery）的话，或许你引入jQuery可以让它在解决问题，比如使用插件上有更多的选择，当然这是通过影响代码组织来提高工作效率，随着对于angular理解的深入，在重构时会逐渐摒弃掉当初引入jquery时的一些代码。(?Po主就是这样的人，希望不要被嘲笑，业务却是赶着走)</p><p>所以我觉得两种框架说完全不能一起用肯定是错的，但是我们还是应该尽力去<strong>遵循angular的设计</strong>。</p><h3 id="item-10">10. 如何进行angular的单元测试</h3><p>我们可以使用karam＋jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。<br/>一段简单的测试代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">describe(&#39;calculator&#39;, function () {
beforeEach(module(&#39;calculatorApp&#39;));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
describe(&#39;sum&#39;, function () {
it(&#39;1 + 1 should equal 2&#39;, function () {
var $scope = {};
var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });
$scope.x = 1;
$scope.y = 2;
$scope.sum();
expect($scope.z).toBe(3);
});
});
});</pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>
<p><span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span></p>
<p>关于测试，大家可以看下<a href="http://www.jackpu.com/yi-shi-yong-karmajin-xing-angularce-shi/" rel="nofollow noreferrer" target="_blank">使用karma进行angular测试</a></p>
<p>除了<strong>Karam</strong> , Angular.js团队推出了一款e2e(end-to-end)的测试框架<a href="https://github.com/angular/protractor" rel="nofollow noreferrer" target="_blank">protractor</a></p>
<h3 id="item-11">参考</h3>
<ul>
<li><p><a href="https://www.toptal.com/angular-js/interview-questions" rel="nofollow noreferrer" target="_blank">11 Essential AngularJS Interview Questions</a></p></li>
<li><p><a href="http://www.alexkras.com/11-tips-to-improve-angularjs-performance/#bind-once" rel="nofollow noreferrer" target="_blank">11 Tips to Improve AngularJS Performance</a></p></li>
<li><p><a href="http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/" rel="nofollow noreferrer" target="_blank">AngularJS: My solution to the ng-repeat performance problem</a></p></li>
<li><p><a href="https://www.codementor.io/angularjs/tutorial/angularjs-interview-questions-sample-answers" rel="nofollow noreferrer" target="_blank">29 AngularJS Interview Questions – Can You Answer Them All?</a></p></li>
<li><p><a href="https://www.ng-book.com/p/The-Digest-Loop-and-apply/" rel="nofollow noreferrer" target="_blank">The Digest Loop and $apply</a></p></li>
<li><p><a href="http://stackoverflow.com/questions/14050195/angularjs-what-is-the-difference-between-and-in-directive-scope" rel="nofollow noreferrer" target="_blank">What is the difference between '@' and '=' in directive scope</a></p></li>
<li><p><a href="https://docs.angularjs.org/api/ng/service/%24compile#directive-definition-object" rel="nofollow noreferrer" target="_blank">Angular compile</a></p></li>
</ul>
<blockquote><p>相关推荐：<a href="https://www.php.cn/course.html" target="_blank">编程教学</a></p></blockquote>
</li>
</ul>
Das obige ist der detaillierte Inhalt von10 eckige Interviewfragen, die von fröhlich bis traurig reichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
