AngularJS ошибки новичка

Изменение DOM-дерева

Перестаньте изменять DOM-дерево в контроллере, с помощью JQuery. Серьезно. Это относится к добавлению, удалению элементов, получению их содержимого, скрытие и показывание элементов. Для этого используйте встроенные директивы или пишите свои, когда это необходимо. 

Если есть проблемы с избавлением от этой привычки - попробуйте удалить JQuery из проекта. Серьезно. У Angular есть свой сервис $hppt и другие директивы, которые заменяют JQuery.  Angular поставляется со своим JQLite, его возможности используются при написании директив, особенно привязка к событиям.

Попытка дублировать функционал, который уже существует

Есть большая верятность, что не только вашему приложению понадобился данный функционал. Есть некоторый функционал, который постоянно пытаются реализовать по своему.

ng-repeat, частенько дублируется. Программисты пытаются добавить элементы, полученные от сервера,  используя JQuery. Это плохо. Именно для этого создан ng-repeat. И он справляется с этим отлично. Сохраниете данные в массив в своем $scope и выведите в DOM с помощью ng-repeat.

ng-show, тоже часто дублируют. Показ и скрытие элементов по условиню используя JQuery, частый паттерн для других приложений, но у Angular  есть решение лучше. ng-hide или ng-show, скрытие или показ элемента по условию, основываясь на булиеновском заначении. Пример:

 <div ng-show="!loggedIn"><a href="#/login">Click here to log in</a></div>

Обратите внимание на похожий  ng-disabled. Так же на мощный ng-switch, он должен быть использован вместо повторяющихся ng-shows.
ng-class  - последний из большой тройки. Применение класса для элемента, в ручную используя JQuery, основываясь на условии. Конечно в Angular есть способ лучше. Можно передать в ng-class список именн классов, разделенных проблемлом и их условий, вот пример:

<div ng-class="{ errorClass: isError, warningClass: isWarning, okClass: !isError && !isWarning }">...</div>

в ng-class передается объект, в котором перечислены CSS имена классов и условия их применения. Будут использоваться только те кслассы, условие для которых получилось true.

$watch и $apply

Двунаправленное связывание данных - это основа Angular. Тем неменее это не магия и в некоторых ситуациях тебе необходимо подсказать фреймворку правильное направление.

Когда ты связываешь значение с элемнтом используя ng-mode, ng-repeat и другие Angular создает $watch над этим значением. Далее, когда значение в области видимости изменится, все $watch'ы, наблюдающие за данным элементом, выполнятся, и обновится все остальное. 

Иногда, чаще всего, когда ты создаешь свои директивы, необходимо объявить собственные $watch, над переменными в области видимости, позволяющие директиве реагировать на изменения.

С другой стороны, когда ты изменяешь значение в области видимости, но приложение не реагирует. Angular проверяет изменение переменных в области видимости после того, как код отработал, например когда срабатывает ng-click, то Angular проверит изменения и отреагирует. Тем не менее, код вне Angular, должен самостоятельно вызвать метод scope.$apply(), чтоб произвести обновление.  Обычно это требуется в обработчиках событий в кастомных директивах.

Использование ng-repeat с другими директивами

ng-repeat - наиболее полезная и одна из самых мощных директив в Angular. Однако преобразование  DOM является трудоемким процессом. Поэтому применение других директив (ng-show, ng-hide, ng-controlle и др) к тому же элементу, что и ng-repeat может привести к проблемам. Если необходимо применить директиву ко всему объекту ng-repeat, оберните его в родительский элемент и примените директиву к нему. Если необходимо применить директиву к каждому элементу - примените директиву к элементу с ng-repeat.

$rootScope существует, но может создать проблемы

Области видимости в Angular формируются иерархично, наследуясь от основной области видимости верхушки дерева. Обычно, это можно игнорировать, т.к. у каждого вью имеют контроллеры, у которых есть своя область видимости.

Изредка,  есть данные, которые необходимо сделать глобальными для всего приложения. Для этого можно проинжектить $rootScope и установить в значение в нем, как в других областях видимости. Поскольку области наследуются от корневой области, эти значения будут доступны  директивам, таким как ng-show так же как значения в локальной $scope.

Конечно, использовать глобальное состояние плохо, а потому стоит использовать $rootScope с умом, как вы бы (надеюсь) обращались с глобальными переменными в любом другом языке. В частности, не используйте их для кода, только в данных. Если будет желание вставить функцию на $rootScope, то почти всегда лучше поместить его в сервис, который может быть инжектирован где это необходимо, и легко протестирован. С другой стороны, не создавайте сервис, чья единственная цель хранение и возврат бита данных.

PS мой перевод данной статьи

Предлоги

Предлоги можно разделить на Предлоги Времени и Предлоги Места

Предлоги места

Предлоги места обозначают положение в пространстве и направление, отвечают на вопрос: где? Можно выделить следующие предлоги:

• in -  внутри, в
• on - на
• at - у, за
• across - через, по ту сторону
• under - под
• by - около, у
• behind - за, позади
• over - над

Употребление:

In: Предмет находится в пределах большого пространства или внутр огороженного пространства.

We're in Greece - Мы в Греции. (В пределах большого пространства)

She can sleep in my room. Она может спать в моей комнате. (Внутри комнаты)

My money was  in the car. Мои деньги были в машине. (Внутри машины)

At: Предмет находится в конкретном месте или вблизи чего-либо

Her car was at the airport. Ее машина была в аэропорту. (На территории аэропорта, но не в самом здании)

We'll meet at my aparment. Мы встретимся у моей квартиры. (У входа в квартиру, а не в ней)

My car is at the garage. Моя машина у гаража. (У входа в гараж, в не в нем)

On: Предмет находится на поверхности чего-либо.

His ring was on the floor. Его кольцо было на полу.

Your name was on the envelope. Твое имя было на конверте.

His picture was on the wall. Его картина была на стене.

Предлоги времени

Могут указывать на точное время, на начало или конец действия, на период времени.

In: употребляется, когда речь идет о долгом периоде времени.

1. Год или месяц: in 1999, in May
2. Время дня, года: in the autumn, in the morning
3. Столетие или определенный период. in the stone age, in the 16th centure, in the future
4. Что-то произойдет через некоторое время. in a few minutes, in an hour, in two days.

On: употребляется  с датами и днями недели.

on Monday, on 14th of August. 

At: употребляется, когда речь идет о коротком промежутке времени

1. Время по часам. at 3 o'clock
2. В короткие промежутки времени. at the moment, at breakfast

Future Continuous

Используется, чтобы рассказать о:

1.  Длительном действии в будущем, которое будет продолжаться некоторое время.(This time tomorrow I will be lying on the beatch.)
2. Действии, которое гарантированно произойдет. (She will be studying at University in September.)

Вопрос	Утверждение	Отрицание
Will she be leaving next Friday?	Will be + глагол c окончанием ing We will be travelling.	I will not be travelling next winter.

Past Continuous

Используется:

1. Если мы говорим о длительном действии, которое происходило в прошлом. (I was watching TV at 8 pm.)
2. Говорим о длинно действии в прошлом, которое было прервано более коротким действием. (When she came, I was talking to my friend.)
3. Мы говорим о двух действиях, которые происходили в прошлом одновременно.В этом случае чаще всего используется слово while. (Jane was slipping, while Robert was cooking lunch.)
4. Мы употребляем наречие always/constantly, для того, чтобы выразить раздражение. (She was always talking. It was driving me crazy.)

Формы:

Вопрос	Утверждение	Отрицание
Was I listening to the music, when he came? Were we discussing the plans?	I, he, she it + was + глагол с окончанием ing you, we, they + were + глагол с окончанием ing I was reading a book.	I, he, she it + was + not + глагол с окончанием ing you, we, they + were + not + глагол с окончанием ing I was not reading a book.

Present Continuous

Используется:

1. Для обозначения действий, которые происходят в данный момент (I am reading a book now. My sister is leaving with me right now).
2. Для обозначения действий, которые развиваются в данный момент. (The climate is getting warmer.)
3. Для обозначения будущих планов. (She is playing tennis on Sunday moning.)
4. Для выражения недовольства с наречиями always, constantly. (You are always comming late)
5. Со словами: now, at the moment, nowadays. (At the moment I am waiting for you.)

Формы:

Вопрос	Утверждение	Отрицание
Am I doing this right?	Предмет + глагол to be + глагол+ing I'm reading. He(she, it) is reading You are reading.	I am not writing a test right now.

Правила добавления окончания -ing:

1. Если глагол заканчивается на -е, которая не читается, ее нужно убрать: receive-receiving.
2. Если слово заканчивается на ударный слог -последняя буква удваивается. run-running, begin-beginning.
3. В британском английском, удваивается буква L. cancel-cancelling
4. Если глагол заканчивается на -ie, то окончание заменяется на -y.die-dying, tie-tying
5. Если слово заканчивается на -c, то заменяется на -ck. panic-panicking

@RestController vs. @Controller

Spring MVC и REST 

Spring - MVC фреймфорк, использующий аннотации, которые позволяют облегчить процесс создания RESTfull веб-сервиса. Основная разница между традиционным Spring MVC контроллером и RESTfull веб-сервис контроллером заключается в способе создания тела HTTP ответа. MVC контроллер опирается на технологию View, а RESTfull веб сервис контроллер  возвращает объект, который представляется в HTTP ответе  в виде JSON или XML. Для более подробного описания перейдите на эту ссылку.

Схема работы Spring MVC

1. Клиент отправляет запрос к веб-сервису.
2. Запрос перехватывается DispatcherServlet, который ищет Handler Mappings и соответствующий тип.
3. Запрос обрабатывается контроллером и результат передается DispatcherServlet, а потом перенаправляется во view.

Использование @ResponseBody 

Когда вы используете аннотацию @ResponseBody для метода, Spring автоматически записывает результат в тело http ответа. Каждый метод в контроллере должен иметь данную аннотацию. Схема работы представлена на рисунке 1.

Рисунок 1.

Что происходит внутри

У Spring есть список HttpMessageConverters. HttpMessageConverter обязан конвертировать тело запроса к определенному классу и и класс к телу ответа, в зависимости от типа. Каждый раз, когда происходит запрос с аннотацией @ResponseBody, Spring ищет  среди всех HttpMessageConverters подходящий и использует его.

Пример

Рассмотрим POJO класс:

import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement(name = "Employee")
public class Employee {
    String name; 
    String email;
    public String getName() {
       return name;
    }
    public void setName(String name) {
      this.name = name;
    }
    public String getEmail() {
       return email;
    }
    public void setEmail(String email) {
      this.email = email;
    }
    public Employee() {
    } 
}

И класс с аннотацией @Controller:

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.example.spring.model.Employee;
@Controller
@RequestMapping("employees")
public class EmployeeController {
    Employee employee = new Employee();
    @RequestMapping(value = "/{name}", method = RequestMethod.GET, produces = "application/json")
    public @ResponseBody Employee getEmployeeInJSON(@PathVariable String name) {
       employee.setName(name);
       employee.setEmail("employee1@genuitec.com");
    return employee; 
    }
    @RequestMapping(value = "/{name}.xml", method = RequestMethod.GET, produces = "application/xml")
    public @ResponseBody Employee getEmployeeInXML(@PathVariable String name) {
       employee.setName(name);
     employee.setEmail("employee1@genuitec.com");
       return employee; 
    }
}

В результате получим:
JSON: http://localhost:8080/SpringRestControllerExample/rest/employees/Bob

XML: http://localhost:8080/SpringRestControllerExample/rest/employees/Bob.xml

Использование аннотации @RestController

В Spring 4.0 была представлена аннотация @RestController. Применив ее к контроллеру добавляются аннотации @Controller, а так же @ResponseBody применяется ко всем методам. Подробнее можно почитать здесь. Схема работы на рисунке 2.

Рассмотрим этот же пример, но с новой аннотацией, POJO- класс не изменится, а контроллер примет следующий вид:

package com.example.spring.rest;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.example.spring.model.Employee;
@RestController
@RequestMapping("employees")
public class EmployeeController {
    Employee employee = new Employee();
    @RequestMapping(value = "/{name}", method = RequestMethod.GET, produces = "application/json")
    public Employee getEmployeeInJSON(@PathVariable String name) {
       employee.setName(name);
       employee.setEmail("employee1@genuitec.com");
       return employee;
    }
    @RequestMapping(value = "/{name}.xml", method = RequestMethod.GET, produces = "application/xml")
    public Employee getEmployeeInXML(@PathVariable String name) {
       employee.setName(name);
       employee.setEmail("employee1@genuitec.com");
    return employee; 
    } 
}

Заметьте, что не нужно добавлять @ResponseBody к каждому методу. Запустив приложение - получим тот же результат.

PS это мой  перевод данной статьи

Future Simple

Используется:

1. Факты и утверждения о будущем. (It will be summer soon.)
2. Решения, которые были приняты спонтанно, в момент разговора. (I will have some coffee and  my friend will have some tea, please)
3. Предсказания или прогнозы, о том, что может произойти, обычно, используются следующие выражения: I think, I believe, I am sure (I think it will be sunny tomorrow.)
4. Выражение стремлений, желаний, обещаний, предложений, угроз, просьб. (I promise I will help you to fix your car.)
5. Используются слова: next week(year, etc), tomorrow, tonight, in two minutes(in a year, etc), soon.( I will see you tomorrow)

Формы:

Вопрос	Утверждение	Отрицание
When will she be there? Shall I open window? (Shall используется, чтобы вежливо спросить о чем то. Shall только с I или We)	I will go home. We will see you tomorrow	will not/won't I won't (will not) buy tickets for you.

Past Simple

Используется:

1. Когда говорим о событии, которое произошло в определенный момент в прошлом (Yesterday I lost my book)
2. Если рассказывается о событии, которое началось и закончилось в прошлом. (The top teams practiced all year  to prepare for the bi event)
3. Для описания действия в прошлом. (I visited me parents and talked to Pat)
4. Для описания действий, которые повторялись в прошлом. (I went to school in Brooklyn)
5. Со словами yesterday, last week, last month, to years ago, in 2000 (I lived in Spaine last year.)

К правильным глаголам в прошедшем времени добавляется -ed или -d. 

• Если глагол заканчивается на -e, то к нему добавляется -d ( live - lived). 
• Если глагол заканчивается на другую букву - добавляется -ed (watch - watched).
• Если глагол заканчивается на согласную + y, то добавляется -ed и y заменяется на i (study - studies)
• Так же есть неправильные глаголы, для них необходимо использовать вторую форму.

Вопрос	Утверждение	Отрицание
When did she find new friends	I lived in Spaine last year. I went to school in Brooklyn.	I didn't like onion when I was a child.

Present Simple.

Используется:

1. Для того, чтобы рассказать о действия, которые стали привычкой (I brush my teeth twice a day)
2. Что бы рассказать о явлениях природы,неопровержимых фактах (Water freezes at zero degrees)
3. Неважно, когда происходит действие, относительно момента высказывания (I don't eat discuits. I live in Russia)
4. Если в предложении есть слова: Every day, Every... , Usually..., Always...,  Often.., on Monday (I often play basketball)

Форма

Вопрос	Утверждение	Отрицание
Does употребляется с hi, she, it Do употребляется с I, you, we, they Do you have a ball? Why does he watch TV?	I leave alone He leaves alone She leaves alone	do not (don't) употребляется  I, You, We, They does not (doesn't) He, She, It I do not have a children She does not have a children

Исключения:

1. После He, she, it для слов оканчивающихся на: -o, -ch, -sh,-x,-s,-z добавляется -es
2. Если глагол заканчивается на -y и перед ней стоит согласная, то y меняется на -i и добавляется -es (try - tries)
3. Если глагол заканчивается на -y и перед ней стоит гласная, то добавляется -s (say - says)

AngularJs ng-option

Пользователю часто предоставляется выбор одно значения из многих, для этого удобно использовать   тэг <select>, все бы хорошо, но, логично, что то что мы показываем пользователю напрямую не может уйти в бэкэнд, для этого этого нам пригодится директива ng-option:

<select ng-model="dsInfo.settings.dataBaseType"
                  ng-options="type.value as type.name for type in dataBaseTypes"
                  required="true"/>

Что же тут происходит?!

1. in работает, как директива  в ng-repeat
2. for type - алиас, по которому можно будет обращаться к иттерируемому  объекту
3. type.value будет устанавливать в модель, в данном случае dsInfo.settings.dataBaseType
4. as type.name - то что будет показываться пользователю