1

Этап 1

AngularJS on Codecademy

2

Этап 2

Shaping up with Angular on Codeschool

1

Этап 1

AngularJS on Codecademy

2

Этап 2

Shaping up with Angular on Codeschool

18 апреля 2016
Цель завершена 1 января 2018
Общая

Изучение всего, что связано с AngularJS

После длительного пользования Smartprogress, понял, что если делать много записей в одной цели, то будет проблематично найти информацию полугодовой давности, тем более еще и фильтр записей у меня почему-то не хочет работать.

В этой цели я буду выкладывать Теорию, конспекты, практические задания, выполненые проекты, ссылки на прочтение и т.д. Это будет своего рода Reference Point по AngularJS для меня.

Если интересно, подписывайтесь.

 Критерий завершения

Я создал каталог ссылок, примеров и конспекты по Angular а также активно пользуюсь им

 Личные ресурсы

саморазвитие

 Экологичность цели

Освоение нового

  1. AngularJS on Codecademy

    Пройден курс и выполнены все проекты

    Стоимость этапа — 1650 ₽

  2. Shaping up with Angular on Codeschool

    Пройти первый бесплатный курс

  • 5133
  • 18 апреля 2016, 06:22

Бюджет

1650 ₽

Цель состоит в группе

Веб-разработка

  • 1715

    участников
  • 2436

    целей

Вывод

624день
Ильдар1 янв. 2018, 18:27

Время еще не пришло для Ангуляра

Дневник цели

7день

Запись к этапу «AngularJS on Codecademy»

Ильдар24 апр. 2016, 09:48

Проект №15 на Codecademy - Angular NearMe (Leaflet directive)

Один из последних проектов на кодекадеми, где обобщаются все полученные знания
A popular directive is the leaflet directive, which allows you to embed a map in your AngularJS app.

Что делает приложение:

  • The app displays places of interest on a map. When you click on a map marker, a popup with a message displays.
  • When you click on the About link at the top right, an page with more information about the app displays.

Вот как -должно быть

7день

Запись к этапу «AngularJS on Codecademy»

Ильдар24 апр. 2016, 03:13

Проект №14 на Codecademy - Angular BookReader

1) The app displays a list of books on the home page.

2) When you click on a book, it takes you to the book's description.

3) When you click the Read button, it takes you to the book's first chapter. From there, you can use the Forward and Back buttons to read the book.


Вот как - должно быть - пришлось заменить стрелки(назад, вперед)

Что сделано:

  • 1) Adding angular-route.js script into the head
  • 2) in app.js injecting ngRoute into the module’s dependency array, so that routing is available for the app to use.
  • 3) in app.js, used app.config() and $routeProvider to set up the routes.
  • 4) Mapped the URL /book to the controller BookshelfController and the template views/bookshelf.html , Otherwise, redirect to /books.
  • 5) Created a service named books for getting data from the books API(books.json). Attached this js file, as a script to the bottom of the body element.
{ "title": "Metamorphosis", "cover": "img/metamorphosis.jpg", "author": "Franz Kafka", "description": "Gregor Samsa turns into a large insect-like creature.", "chapters": [ { "title": "I", "paragraphs": ["paragraph 1", "paragraph 2"] }, { "title": "II", "paragraphs": ["paragraph 1", "paragraph 2", "paragraph 3", "paragraph 4"] }, { "title": "III", "paragraphs": ["paragraph 1", "paragraph 2", "paragraph 3"] } ] }

Each book has a title, cover, author, description, and array of chapters. Each chapter has a title and array of paragraphs.

  • 6) Set up the Controller “BookshelfController” and the template bookshelf.html

Using the books service to load data from the server into the $scope.myBooks.

In bookshelf.html , using <a href=”#/books/{{ $index }}”> to create a URL for each book. The $index gives the index of a book in the myBooks array. This means the URL of the first book is #/books/0, the URL of the second book is #/books/1, and so forth.

  • 7) In the view in the main section, added ng-view. When you visit /books, a view is constructed by injecting bookshelf.html in to the ng-view in index.html.
  • 8) In app.js, added another route. Mapped the URL /books/:bookId to the controller BookController and the template book.html.

In BookController, used books service to load a single book into the $scope.book property, and then used $routeParams.bookId to access the specific book by its index.

Finished template book.html, when you click on a book, a view is constructed by injecting book.html into the ng-view in index.html.

  • 9)When a user clicks on the Read button, he should go to the book’s first chapter. From there, he can use the Next and Back buttons to read the book.

In app.js added another route. Mapped the URL /books/:bookId/chapters/:chapterId to the controller ChapterController and the template chapter.html.

5день

Запись к этапу «AngularJS on Codecademy»

Ильдар22 апр. 2016, 12:02

Проект №13 на Codecademy - Angular Calendar Events

The app displays a list of events in a single day. When you click on an event, it shows its details

Вот как - должно быть - Я добавил кнопку назад в главное меню, изменил лого

Что сделано:

  1. Attached angular.route.min.js link to the head
  2. Created app.js, injected ngRoute into module’s dependency array, so that routing is available for the app to use.
  3. Defined the app’s routes (DayController & EventController)
  4. Created a service named events.js to get event data and displayed it in the app.
  5. Set up the controller DayController(home page) and the template day.html
  6. Added ng-view into the index.html
  7. Set up the controller EventController(events) and template event.html
  8. Used expressions, filter to make injected data visible.
Схему которую я сделал, получилась своего рода Cheat Sheet - так намного легче писать приложение, и если что-то не появляется в index.html, идешь мысленно по схеме, и ищешь баги и ошибки...хорошо седня мозги по работали, в поисках мелких ошибок
5день

Запись к этапу «AngularJS on Codecademy»

Ильдар22 апр. 2016, 06:22

Проект №12 на Codecademy - Angular Outbox2 using routes

When you click on an email, it shows the entire message

Вот как - должно быть

Вот Angular Outbox 1

Что сделано:

  • 1)<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
  • You need to include this additional JavaScript file in order to add routing to your app because it does not come with the AngularJS library by default.
  • 2)in app.js define the app’s routes
  • 3) Include <div ng-view></div> into the view
  • 4) Create and fill up emails template

Мои аккаунты на разных ресурсах:

  1. TeamTreeHouse
  2. Codecademy
  3. Codeschool
  4. GitHub
  5. FreeCodeCamp
  6. MyWebsite - to be updated later
  7. Linkedin
5день

Запись к этапу «AngularJS on Codecademy»

Ильдар22 апр. 2016, 05:00

Unit 4 - Routing - Project#11

Кликаем на картинку, что увидеть картинку в увеличенном размере и описание.

What happens when the app grows and needs to display more information? Stuffing more code to a single view will quickly make things messy.

A better solution is to use multiple templates that display different pieces of data based on the URL that the user is visiting. We can do this with Angular's application routes.

  • In app.js inside the app.config() method, we use Angular's $routeProvider to define the application routes.
  • We used .when() to map the URL / to to the controller HomeController and the template home.html. The HomeController uses the service js/services/photos.js to fetch the array of all photos from https://s3.amazonaws.com/codecademy-content/cours... and stores it into $scope.photos. The home.html uses ng-repeat to loop through each item in the photos array and display each photo.
  • Otherwise if a user accidentally visits a URL other than /, we just redirect to / using .otherwise().
  • Now when a user visits /, a view will be constructed by injecting home.html into the <div ng-view></div> in index.html.
  • In app.js, we mapped a URL to PhotoController and photo.html. We added a variable part named id to the URL, like this: /photos/:id.
  • In PhotoController, we used Angular's $routeParams to retrieve id from the URL by using $routeParams.id. Notice that we injected both $routeParams and the photos service into the PhotoController dependency array to make them available to use inside the controller.
  • Then to fetch an individual photo, we first used the photos service to fetch the array of photos from the server, and then used $routeParams.id to access the specific photo by its index.
  • As before, any properties attached to $scope become available to use in the view. This means in photo.html, we can display the photo's detail using expressions as done before.
  • Notice that when you click on links, the app doesn't do a full reload. Only the part of the view specified by <div ng-view></div> changes.
  • In the template photo.html display a photo’s remaining five pieces of data(title, author, url, pubdate, upvotes, views) + used filters

Why are routes useful? Instead of filling a single view with more code than needed, routes let us map URLs to self-contained controllers and templates. Furthermore, now that the app has URLs, users can easily bookmark and share the app's pages.

What can we generalize so far?

  1. Directives are a way to make standalone UI components, like <app-info>
  2. Services are a way to make standalone communication logic, like forecast which fetches weather data from a server
  3. Routes are a way to manage apps containing more views.
в Excel сделал мозговой штурм этой главы, дабы лучше запомнить материал и сделать код проекта визуальным(зрительная память работает), прикрепил JPEG
4день

Запись к этапу «AngularJS on Codecademy»

Ильдар21 апр. 2016, 09:50

Проект №10 на Codecademy - Angular Outbox

Вот как - должно быть

Что сделано:

  1. Created new Module named OutboxApp, and attached it to the body element in the view
  2. Created service named emails, using app.factory and $http to get email data from emails.json
  3. Included js file in the view as a script
  4. In the controller, used the emails service to fetch data from the server.
  5. Included controller to the view
  6. In the view, finished the code to display an emails list


Мои аккаунты на разных ресурсах:

  1. TeamTreeHouse
  2. Codecademy
  3. Codeschool
  4. GitHub
  5. FreeCodeCamp
  6. MyWebsite - to be updated later
  7. Linkedin
4день

Запись к этапу «AngularJS on Codecademy»

Ильдар21 апр. 2016, 06:20

Unit 3 Services - Project 9

Use services to communicate with a server.

But what happens when the data contains hundreds of items, or if it's constantly changing like weather or financial data? Hardcoding data into a controller won't work anymore.

A better solution is to read the live data from a server. We can do this by creating a service.

Why are services useful? Instead of filling the controller with code to fetch weather data from a server, it's better to move this independent logic into a service so that it can be reused by other parts of the app.

  • 1) First in js/services/forecast.js, I made a new service. I used app.factory to create a new service named forecast
  • 2) The forecast service needs to use AngularJS's built-in $http to fetch JSON from the server. Therefore, I added $http to the forecast service as a dependency, like this:

['$http', function($http) {

// ...

}]

Now $http is available to use inside forecast.

  • 3) Then, inside forecast, I used $http to construct an HTTP GET request for the weather data. If the request succeeds, the weather data is returned; otherwise the error info is returned.
  • 4) Next in the controller, we used the forecast service to fetch data from the server. First we added forecast into MainController as a dependency so that it's available to use. Then within the controller we used forecast to asynchronously fetch the weather data from the server and store it into $scope.fiveDay
  • 5) As before, any properties attached to $scope become available to use in the view. This means in index.html, we can display the city_name using an expression as done before.

What can we generalize so far?

1) Directives are a way to make standalone UI components, like <app-info>

2) Services are a way to make standalone communication logic, like forecast which fetches weather data from a server

3день

Запись к этапу «AngularJS on Codecademy»

Ильдар20 апр. 2016, 13:14

Проект №8 на Codecademy - AngularFeedster

Вот как - должно быть

Что сделано:

  1. Created a new module named FeedsterApp and attached it to the body
  2. Created controller file, now it contains an array of objects with information about each post. Attached the controller to the index.html
  3. Created directive named feedsterPost.js and attached it to the index.html as a script
  4. Created directive template, to display each post’s author name, author avatar, comment image, and comment text
  5. Used <feedster-post> directive to display the details of each post
  6. Used ng-repeat to loop through posts
  7. Сreated another directive plusOne.js to make interactive like’s button
Оставил тему Services and Routing на завтра, вечером закреплю директивы, просмотром видео в ютубе

Мои аккаунты на разных ресурсах:

  1. TeamTreeHouse
  2. Codecademy
  3. Codeschool
  4. GitHub
  5. FreeCodeCamp
  6. MyWebsite - to be updated later
  7. Linkedin
3день

Запись к этапу «AngularJS on Codecademy»

Ильдар20 апр. 2016, 11:12

Проект №7 на Codecademy - AngularGameboard

Вот как - должно быть

Что сделано:

  1. Created a new module named GameboardApp, an then attached it to the body
  2. Created controller file and attached it to the html.
  3. Created new directive named game, templateUrl – game.html
  4. Included new JS file into HTML as a script
  5. Created directive’s template, so it displays a game’s details : visitor_team, home_team, period, visitor_score and home_score
  6. Include our directive in the view, as a <game> to display the details of each game
  7. used ng-repeat to loop through the scores and pass each item into the <game> directive’s info attribute.

Мои аккаунты на разных ресурсах:

  1. TeamTreeHouse
  2. Codecademy
  3. Codeschool
  4. GitHub
  5. FreeCodeCamp
  6. MyWebsite - to be updated later
  7. Linkedin

Вы тоже можете
опубликовать свою
цель здесь

Мы поможем вам ее достичь!

309 000

единомышленников

инструменты

для увлекательного достижения

Присоединиться
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?
Paul
Sergey
Mr De
Ehhhhh
Александр П
Артур
Елена
AndersFly
Лена
Артур
Елена
AndersFly
Лена
Артур
AndersFly
Лена
Артур
Елена
AndersFly
Лена
Артур
Елена
AndersFly
Артур
Елена
AndersFly
Лена
Артур
Елена
AndersFly
Артур
Dmitry
Елена
Лена
Артур
Дмитрий
Dmitry
Елена