Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Вопросы новичка (https://javascript.ru/forum/angular/70570-voprosy-novichka.html)

iamme 15.09.2017 18:20

Вопросы новичка
 
Помогите подступиться к фреймворку, поставила Angular, погуглила тему, даже начала пример из туториала https://angular.io делать, но остается недопонимание...

Весь туториал на angular.io посвящен TypeScript, никакого голого JavaScript. На нем вообще не пишут в новом Angular или как? JavaScript был языком кодирования в старом AngularJS?

Ок, допустим TypeScript, но там своеобразная структура проекта с файлами модулей, конфигами. Все компилится в файлы JS. Но как мне потом деплоить эту кашу на сервер? Я так понимаю, в итоге все равно должны быть включены js-файлы и подключен скрипт
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> ? Или нет?

TypeScript же браузеры выполнять не умеют. Каким чудом у меня вообще запускается Angular проект в браузере?

void() 16.09.2017 01:41

Ну, можно и на чистом JS писать. Почему Google пишут на TypeScript? Чтобы ускорить разработку и было удобнее. Если вы тоже так хотите, то нужно ставить Node.js + gulp. И потом ставить gulp-typescript через npm.

В итоге у вас на лету TypeScript будет преобразовываться в чистый JS. Это не так уж сложно, как может казаться поначалу. На самом деле легко и удобно, главное один раз разобраться и все настроить. Грубо говоря, напишете строчку на TypeScript, сохраняете документ и у вас сразу же на лету обновляется нормальный файл с js, который подключен к html.

Но вообще-то, вместо того, чтобы изучать Angular, вам тогда придется изучать еще много чего. А это не лучшая тактика. Так что лучше найти учебник без TypeScript. И вообще TypeScript - устаревает в связи с новым стандартном js. Если раньше этот язык имел смысл, то сейчас и на чистом js удобно писать.

iamme 16.09.2017 09:20

А почему я нигде не вижу хелпа, как писать на чистом JS на Angular 2?

На TypeScript я и так пишу, там подробное руководство есть - стартовый пример. Но вроде без gulp. Там Node.js + npm ставишь, дальше все само выкачивается.

И Вот только непонятно, как и куда подключать эти скопмилированные JS файлы.

destus 16.09.2017 09:54

iamme,
Познакомьтесь с Angular-CLI и он решит все ваши проблемы. Gulp вам не поможет. Вы разрабатываете модульное приложение, соответственно вам нужен сборщик модулей. Webpack / Browserify / SystemJS -- выбирайте.
Цитата:

И вообще TypeScript - устаревает в связи с новым стандартном js. Если раньше этот язык имел смысл, то сейчас и на чистом js удобно писать.
серьезно? это не шутка?

iamme 16.09.2017 10:38

Спасибо, CLI я скачала, но пока не поняла, зачем он нужен (за исключением создания шаблона проекта на TS).
В разработке все равно используются пара команд npm

cd quickstart
npm install
npm start


Вторая, я так поняла, запускает сервер локально и каким-то образом отслеживает изменения в файлах, чтобы перекомпилировать их в JS. Первая - скачивает JS пакеты, которые видимо где-то в стартовом проекте прописаны.

Кто тут компилит TS (TypeScript) и где в работу идет Angular CLI, так и не поняла пока (хотя CLI в туториале требуется к установке и установлена).

iamme 16.09.2017 10:39

Постоянно обновляются JS файлы, которые делаются из TS. Но где этот html, в котором они подключаются, найти пока не могу. Или не то ищу.

ЗЫ
все мои действия обусловлены туториалом отсюда https://angular.io/guide/quickstart

destus 16.09.2017 10:58

Цитата:

Вторая, я так поняла, запускает сервер локально и каким-то образом отслеживает изменения в файлах, чтобы перекомпилировать их в JS.
webpack --watch
https://webpack.js.org/configuration/dev-server/
скринкаст

Nexus 16.09.2017 11:34

Прошу прощения за оффтоп.
Иногда появляется мысль познакомиться с серверным js, но то, что для написания чего-либо элементарного нужно подключить и настроить вагон и маленькую тележку зависимостей/утилит всегда меня останавливает.

iamme 16.09.2017 11:46

Знали бы вы, какой вагон бывает нужен для разработки на java...
Я вот просто фронтенд решила попробовать как положено делать, а не формировать на сервере. С сервера только json хочу выдавать (на java).
Но всегда думала, что javascript требует только браузера и блокнота, а оказалось, что теперь не так

iamme 16.09.2017 12:07

Цитата:

Сообщение от destus (Сообщение 464632)
webpack --watch

Так а почему webpack --watch предлагаете, а не nmp start, как в официальном туториале? Есть преимущество?

void() 16.09.2017 12:58

Цитата:

Сообщение от iamme (Сообщение 464625)
И Вот только непонятно, как и куда подключать эти скопмилированные JS файлы.

Ну, в html? Есть варианты. Я делаю через Gulp. Надо будет установить несколько пакетов. Потом настроить таски и запустить через консоль watch. После этого система отслеживает все, что у вас там происходит и все файлы склеивает-обновляет-минимизирует-перекомпилирует-сжимает картинки-форматирует-расставляет префиксы в css и обновляет браузер автоматом. И так далее.

В общем, ищите туториал по Gulp или webpack - разницы нет, я думаю.

void() 16.09.2017 13:42

Цитата:

Сообщение от destus (Сообщение 464626)
серьезно? это не шутка?

Я думаю что да. TypeScript - устаревает. JS развивается и берет все лучшее из TypeScript, CoffeScript, jQuery. Функционал будет дублироваться. Какой смысл?
И вообще мое личное мнение, что Angular - это не очень круто. Вы столько зависимостей на свой проект понавешиваете, что будет тяжко потом. Angular, TypeScript... Еще остается подключить jQuery и Bootstrap и будет вообще бомба! :lol: :lol: :lol:

iamme 16.09.2017 16:44

А скажите, почему я не могу открыть Angular проект простым открытием файла index.html в браузере? Почему ничего не грузится, пока не запустишь сервер http://localhost:3000/?

Код такой index.html


<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

iamme 16.09.2017 16:53

И второй вопрос - js-файлов то у меня в проекте много, больше чем тут подключено. Каким волшебством они срабатывают, то есть оказываются подключенными в итоге?

iamme 16.09.2017 17:14

В том числе не подключен https://ajax.googleapis.com/ajax/lib...angular.min.js
Он же должен быть?


Часовой пояс GMT +3, время: 23:54.