Это немного старый фреймворк для 2017 года, не так ли?
Вот почему я использую angularjs вместо reactjs или другого внешнего интерфейса (кстати, я создам версию React):
- Многие приложения все еще используют фреймворк angularjs.
- После того, как я закончил свои фронтенд-челленджи на freecodecamp, у меня действительно появился проектный наркоман (желание сделать приложение), я использую этот дух, чтобы изучать новые вещи.
- У Angularjs все еще есть выбор в отношении требований к работе, особенно в моей стране.
4. У Angularjs большое онлайн-сообщество.
Хорошо, давайте просто начнем строить!
Как я уже сказал выше, это мое первое приложение, поэтому я буду делать это шаг за шагом. Настройка среды для сборки этого проекта:
- Конечно Angularjs
- Bootstrap (я использовал bootstrap для своего приложения)
- Marked js (интерпретатор Markdown)
- 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 здесь