Это немного старый фреймворк для 2017 года, не так ли?

Вот почему я использую angularjs вместо reactjs или другого внешнего интерфейса (кстати, я создам версию React):

  1. Многие приложения все еще используют фреймворк angularjs.
  2. После того, как я закончил свои фронтенд-челленджи на freecodecamp, у меня действительно появился проектный наркоман (желание сделать приложение), я использую этот дух, чтобы изучать новые вещи.
  3. У Angularjs все еще есть выбор в отношении требований к работе, особенно в моей стране.

4. У Angularjs большое онлайн-сообщество.

Хорошо, давайте просто начнем строить!

Как я уже сказал выше, это мое первое приложение, поэтому я буду делать это шаг за шагом. Настройка среды для сборки этого проекта:

  1. Конечно Angularjs
  2. Bootstrap (я использовал bootstrap для своего приложения)
  3. Marked js (интерпретатор Markdown)
  4. Bower (я устанавливаю пакет в Bower :), там много менеджеров пакетов)

Шаг 1 Установка зависимостей

Я создаю локальный каталог проекта и называю его markdown-viewer-angular.

затем я устанавливаю пакет Bower в свой каталог в каталоге моего проекта.

компакт-диск приложение-проект

Инициализация беседки

затем вы можете установить зависимости, необходимые для этого проекта. Сначала я устанавливаю угловой пакет.

беседка установить угловой

затем я устанавливаю бутстрап

Bower установить бутстрап

прежде чем я забуду об этом, я установлю уценку Intrepreter

установка беседки отмечена

хорошо, это все для инициализации проекта.

шаг 2 файл стартер для проекта

После установки всех зависимостей я создам файл index.hmtl, который будет моим основным html-файлом для этого проекта и будет включать все js и css из пакета.

вот пакет в моем html-файле (angularjs, markjs, bootstrap).

‹!DOCTYPE html›
‹html›
‹head›
‹meta charset=”utf-8›
‹title›Предварительный просмотр Markdown‹/title›

‹link rel="stylesheet" href=""./bower_components/bootstrap/dist/css/bootstrap.css"›
‹/head›
‹body›

‹script type=”text/javascript” src=”./bower_components/angular/angular.js”›‹/script›
‹script type=”text/javascript” src=”./bower_components/angular-sanitize /angular-sanitize.js»›

‹/script›
‹script type="text/javascript" src=""./bower_components/jquery/dist/jquery.js"›‹/script›
‹script type="text/javascript" src=""./bower_components/bootstrap/dist/js/bootstrap.js"›‹/script›
‹script type="text/javascript" src=""./bower_components/marked/marked.min.js" ›‹/script›
‹script type="text/javascript" src="index.js"›
‹/script›
‹/body›
‹/html›

Шаг 3: запустить angularjs

минимальные требования для запуска angularjs - это сделать директиву ng-app на нашей html-странице.

‹html ng-app=""MakrkdownViewer""›

‹/hhtml›

затем сделайте контроллер, чтобы дать нам возможность внести изменения в html

‹body ng-controller="MarkdownController"›

после того, как мы объявим ng-app и ng-controller, мы должны получить index.js, чтобы запустить angularjs, и вот мой файл index.js:

(function(){
var app = angular.module("MakrkdownViewer", ["ngSanitize"]);

var MarkdownController = function($scope) {
$scope.message = «Предварительный просмотр Markdown»;

};

app.controller("MarkdownController", MarkdownController);
}());

и если мы вызовем или свяжем сообщение в html, оно запустит для нас приложение angularjs.

Шаг 3. Создайте средство предварительного просмотра уценки

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

файл index.js

var MarkdownController = function($scope, $http) {
$scope.message = Предварительный просмотр Markdown;
$scope.textInput = 'Предварительный просмотр Markdown (это заголовок)\n===== ==\n\nСборка с использованием angularjs (это подзаголовок)\n — — — — — -\n \n### и, конечно же, помечены js, рекомендованными freecodecamp\n \nАбзацы разделяются\nпустой строкой.\n\ nОставьте 2 пробела в конце строки, чтобы сделать \nразрыв строки\n\nАтрибуты текста *курсив*, **полужирный**, \n`моноширинный`, ~~перечеркнутый~~ .\n\nСписок покупок:\n \n * первая\n * вторая\n * третья\n\nНумерованный список:\n\n 1. первая\n 2. вторая\n 3. третья\n\nДождь — -не царствование — -в\nИспании .\n\n *[Йоки Андика](https://medium.com/@yokiandika)*'; //начальное значение в текстовом поле

$scope.$watch("textInput", function(result, init){
$scope.textOutput = mark(result); // модуль, который вносит изменения при вводе в текстовую область
});

mark.setOptions({
средство визуализации: новый mark.Renderer(),
gfm: true,
таблицы: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
app.controller(“MarkdownController”, MarkdownController);

};

index.htmlфайл

‹!DOCTYPE html›
‹html ng-app="MakrkdownViewer"›
‹head›
‹meta charset="utf-8›
‹title›Предварительный просмотр Markdown‹/ заглавие>

‹link rel="stylesheet" href=""./bower_components/bootstrap/dist/css/bootstrap.css"›
‹/head›
‹body ng-controller="MarkdownController"›
‹div class="container"›
‹div class="row"›
‹div class="col-md-12›
‹h1›{{message}}‹/ h1›
‹/div›
‹/div›
‹div class="row"›
‹div class="col-md-6›
‹ textarea class="form-control" ng-model="textInput"›‹/textarea›
‹/div›
‹div class="col-md-6›
‹div class =””›
‹div ng-bind-html="textOutput"›‹/div›
‹/div›
‹/div›
‹/div›
‹/дел›

‹script type=”text/javascript” src=”./bower_components/angular/angular.js”›‹/script›
‹script type=”text/javascript” src=”./bower_components/angular-sanitize /angular-sanitize.js»›

‹/script›
‹script type="text/javascript" src=""./bower_components/jquery/dist/jquery.js"›‹/script›
‹script type="text/javascript" src=""./bower_components/bootstrap/dist/js/bootstrap.js"›‹/script›
‹script type="text/javascript" src=""./bower_components/marked/marked.min.js" ›

‹/script›
‹script type="text/javascript" src="index.js"›
‹/script›
‹/body›
‹/html›

Я делаю модель с ng-моделью в текстовой области, чтобы внести изменения, когда пользователь вводит ввод, и привязываю вывод с помощью ng-bind-html.

Думаю, это все о моем первом Angularjs, до встречи и счастливого кода!!!

вы можете увидеть проект в моем репозитории на github здесь