<p style="text-align: center;"><img src="https://img.php.cn/upload/image/138/691/841/1598408736489222.jpg" title="1598408736489222.jpg" alt="10 questions dentretien angulaires qui vont du heureux au triste"></p>
<p>Bien qu'il n'y ait que 10 questions, elles couvrent tous les aspects du développement angulaire, y compris les points de connaissances de base, les problèmes rencontrés au cours du processus de développement et des questions plus ouvertes pour identifier le niveau de base de l'intervieweur. et expérience de projet, si vous interviewiez il y a un an, ce serait certainement une transition de la comédie à la tragédie ? (<em>PS : La réponse est pour référence seulement~</em>). </p>
<p> Tutoriels associés recommandés : "<a href="https://www.php.cn/course/list/20.html" target="_blank">tutoriel angulaire </a>" </p>
<h3 id="item-1">1 Quelle est la différence entre <code>ng-show/ng-hide</code> et <code>ng-if</code> ? </h3>
<p>Nous savons tous que ng-show/ng-hide se cache et s'affiche via <code>display</code>. Et ng-if contrôle en fait l'ajout et la suppression de nœuds dom. Par conséquent, si nous chargeons des nœuds DOM en fonction de conditions différentes, alors les performances de ng-if sont meilleures que celles de ng-show.</p>
<h3 id="item-2">2 Expliquez ce qu'est <code>$rootScrope</code> et la différence entre celui-ci et <code>$scope</code> ? </h3>
<p>En termes simples, <code>$rootScrope</code> signifie tous les <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 questions dentretien angulaires qui vont du heureux au triste"></span></p>
<p>Voyons comment générer <code>$rootScope</code> et <code>$scope</code>. </p>
<p>étape 1 : Angular analyse <code>ng-app</code> puis crée <code>$rootScope</code> en mémoire. </p>
<p>étape 2 : Angular revient pour continuer l'analyse, trouve l'expression <code>{{}}</code> et l'analyse dans une variable. </p>
<p>étape 3 : Ensuite, le div avec <code>ng-controller</code> sera analysé et pointé vers une fonction de contrôleur. À ce stade, la fonction du contrôleur devient une instance d’objet $scope. </p>
<h3 id="item-3">3. Comment fonctionne l'expression <code>{{yourModel}}</code> ? </h3>
<p>Il s'appuie sur le service $interpolation. Après avoir initialisé la page html, il trouvera ces expressions et les marquera, donc à chaque fois qu'il rencontrera un <code>{{}}</code>, il définira un <code>$watch</code>. Et <code>$interpolation</code> renverra une fonction avec des paramètres de contexte lorsque la fonction est finalement exécutée, l'expression <code>$parse</code> est appliquée à cette portée. </p>
<h3 id="item-4">4. Qu'est-ce que le cycle de digestion dans Angular ? </h3>
<p>Dans chaque cycle de résumé, angulaire comparera toujours la valeur du modèle sur le scope. Généralement, le cycle de résumé est automatiquement déclenché. Nous pouvons également utiliser $apply pour le déclencher manuellement. Pour des recherches plus approfondies, vous pouvez vous rendre sur <a href="https://www.ng-book.com/p/The-Digest-Loop-and-apply/" rel="nofollow noreferrer" target="_blank">The Digest Loop et postuler</a>. </p>
<h3 id="item-5">5. Comment annuler <code>$timeout</code> et arrêter un <code>$watch()</code> ?</h3>
<p>Pour arrêter $timeout, nous pouvons utiliser annuler : </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">Copier après la connexion</div></div><p>Arrêter un <code>$watch</code> : </p><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">Copier après la connexion</div></div><h3 id="item-6">6. Comment définir la restriction dans la directive angulaire ? Quelle est la différence entre @,=,& dans la portée ? </h3><p>la restriction peut être définie séparément : </p><ul><li><p><code>A</code>attribut correspondant</p></li><li><p><code>E</code>étiquette correspondante</p></li><li><p><code>C</code> correspond à la classe</p></li><li><p><code>M</code> correspond au commentaire </p></li></ul><p>Bien sûr, vous pouvez définir plusieurs valeurs comme <code>AEC</code>, effectuez plusieurs matchs. </p><p>Dans la portée, @,=,& représentent respectivement </p><ul><li><p><code>@</code> lors de la liaison des valeurs. Obtenez une chaîne définie, qui peut être définie par vous-même. Vous pouvez également. utilisez {{yourModel}} pour la liaison ; </p></li><li><p><code>=</code> Liaison bidirectionnelle, liant certaines propriétés sur la portée </p></li><li><p><code>&</code> est utilisé pour exécuter certaines expressions sur la portée parent. Généralement, nous définissons certaines fonctions qui doivent être exécutées </p></li></ul><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">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><div ng-app="docsIsolationExample">
<div ng-controller="Controller">
<my-customer click-handle="alertName()"></my-customer>
</div>
</div></pre><div class="contentsignin">Copier après la connexion</div></div><blockquote><p>Démo Codepen : https://codepen io/Jack_Pu. /pen/NrpRBK</p></blockquote><ul><li><p><code><</code> pour une reliure unidirectionnelle. </p></li></ul><h3 id="item-7">7. Énumérez au moins trois façons de mettre en œuvre la communication entre les différents modules ? </h3><ul><li><p>Service</p></li><li><p>événements, spécifiez l'événement lié </p></li><li><p>Utiliser $rootScope</p> </li><li><p>Les contrôleurs utilisent directement <code>$parent</code>, <code>$$childHead</code>, etc. </p></li><li><p>directive pour spécifier les attributs de liaison de données </p></li></ul> <h3 id="item-8">8. Quelles mesures peuvent être prises pour améliorer les performances angulaires </h3><ul><li><p> Officiellement recommandé, désactivez le débogage, <code>$compileProvider</code></p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">myApp.config(function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
});</pre><div class="contentsignin">Copier après la connexion</div></div><ul><li> <p>Utilisez une expression de liaison une fois {{::yourModel}}</p></li><li><p>Réduisez le nombre d'observateurs</p></li><li><p>Évitez le défilement infini chargement En utilisant ng-repeat, vous pouvez vous référer à cet <a href="http://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/" rel="nofollow noreferrer" target="_blank">article</a></p> pour des solutions</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">Copier après la connexion</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">Copier après la connexion</div></div><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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
