Angularjs Основы входа

Автор：Eve Cole Время обновления：2025-06-14 16:00:03

угловой

Все используемые библиотеки, CDN использовали:

Кода -копия выглядит следующим образом:

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

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Самое мощное в угловом - связывание связывания данных

</div>

<div>

<Скрипт>

app.controller ("bf", function ($ scope) {

$ scope.data = "testdata";

// $ scope. $ Apply ();

});

</script>

</div>

</body>

</html>

Через угловой отображение соответствующих данных массива;.

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Через угловой отображение соответствующих данных массива;

</div>

<div>

<style>

.s {

Цвет:#F00;

}

li {

курсор: указатель;

}

</style>

<ul>

{{i.name}} ---- {{i.age}}

</li>

</ul>

<Скрипт>

//angular.module("Arr-app ", []);

Функция arrcon ($ scope) {

$ scope.flag = 0;

$ scope.bered = function (i) {

$ scope.flag = i;

};

$ scope.lists = [

{имя: "хе -хе",

Возраст: 10},

{

Имя: "xx",

Возраст: 20

{

имя: "yy",

Возраст: 2

{

Имя: "JJ",

Возраст: 220

}

]

};

</script>

</div>

</body>

</html>

Демо из фильтра данных:

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Фильтр данных;

</div>

<br>

</div>

<Скрипт>

Функциональный фильтр ($ scope) {

$ scope.sourcode = "hehe lala dudu oo zz";

};

app.filter ("up", function () {

вернуть функцию (ipt) {

return ipt.replace (/(/w)/g, функция ($ 0, $ 1) {

вернуть ""+$ 1. touppercase ();

});

}

});

</script>

</div>

</body>

</html>

. Факторная фабрика, $ поставщик, услуга и т. Д. Все одинаковы. Не чувствую, что это сложно. На самом деле, это просто увидеть модель данных или экземпляр;:

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Фабрика в угловой, эквивалентной методу общего экземпляра, который можно понимать как функция, которая может использоваться несколькими контроллерами;

</div>

<Скрипт>

app.factory ("ff", function () {

возвращаться {

"Отметить": "Json"

};

});

app.controller ("factory", function ($ scope, ff) {

$ scope.json = ff;

});

</script>

</div>

<div>

Угловая директива;

</div>

<div>

<хе -хе -ха -хе? </heh>

<Скрипт>

app.directive ("heh", function () {

возвращаться {

ограничить: "AE",

Заменить: правда,

Transclude: True,

Шаблон: '<div> <кнопка ng-transclude> </button> </div>'

};

})

</script>

</div>

</body>

</html>

Использование директивы .ng-Switch (я действительно хочу этот шаблон, который является угловым нашим общим кликом, чтобы сначала скрыть и отобразить плагин вкладок) ::

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Использование NG-Switch

</div>

<li ng-switch-default> Другой </li>

</ul>

</div>

<div>

<кнопка ng-click = "a = 1"> тест </button>

<кнопка ng-click = "a = 2"> тест </button>

<кнопка ng-click = "a = 3"> тест </button>

</div>

app.controller ("sw", function ($ scope) {

});

</script>

</div>

</body>

</html>

ng-src и ng-href;

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Использование NG-SRC и NG-HREF (если вы используете SRC или HREF, HTML будет загружен при его инициализации, что определенно невозможно)

</div>

</a>

</div>

app.controller ("srccon", function ($ scope) {

$ scope.logo = "http://www.mainbo.com/templets/images/logo.gif";

});

</script>

</div>

</body>

</html>

Как управлять стилем страницы, просто измените модель связанных данных напрямую:

Кода -копия выглядит следующим образом:

<div>

Angular работает на стилях; (JQ должен вручную выбирать элементы для работы на стилях элементов. Angular предоставляет более метод назначения атрибутов элемента переменной, вам просто нужно изменить эту переменную)

</div>

<div>

хе-хе-о (^^) о вау;

</hehe>

</div>

app.directive ("hehehe", function () {

функция compile () {

};

возвращаться {

Ссылка: функция ($ scope, $ element) {

var obj = angular.element ($ element);

//obj.find нелегко использовать;

var add = obj [0] .getElementsbyclassname ("add") [0];

var уменьшить = obj [0] .getElementsbyclassname ("уменьшить") [0];

Angular.Element (add) .bind ("click", function () {

$ scope.h = $ scope.h+10;

применять();

})

Angular.Element (уменьшить) .bind ("click", function () {

$ scope.h = $ scope.h-10;

применять();

});

функция Apply () {

$ scope. $ Apply ();

}

вернуть компиляцию;

Контроллер: функция ($ scope) {

$ scope.w = 200;

$ scope.h = 50;

// $ scope. $ Apply ();

ограничить: «аэ»,

Заменить: правда,

Применение: "= ng-стиль",

Transclude: True,

Шаблон: '<div> <div ng-transclude> </div> <tood>+</button> <tutry>-</button> </div>'

}

})

</script>

</div>

Как использовать шаблон в угловой? Это должно использоваться с маршрутизатором:

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Используя шаблоны

</div>

<! --- Этот тип должен быть объявлен точно->

</script>

<! --- TPL-это фиксированное значение, а не переменная, а переменная должна быть определена в области --->

<div>

<кнопка ng-click = "chan ()"> изменить </button>

</div>

app.controller ("ngtpl", function ($ scope) {

функция хе -хе (str) {

str = _.shuffle (str);

вернуть str.join ("")

};

$ scope.ver = "var-ver-heehehe";

$ scope.chan = function () {

$ scope.ver = хе -хе ($ scope.ver);

};

});

</script>

</div>

</body>

</html>

Как использовать $ scope. $ Смотрите, чтобы изменить шаблон интерфейса привязки в режиме реального времени:

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

<pran> Обновление </span> Агловидному уведомлению

</div>

<div>

Значение, установленное $ scope. $ watch == >> {{wat}}

</div>

<br>

применять;

</button>

</div>

app.controller ("Apply", function ($ scope) {

$ scope.hehe = "lll____________xxx";

$ scope.m0 = 1;

SS = $ Scope;

$ scope.up = function () {

$ scope.hehe = $ scope.m0;

// Да, но была сообщена ошибка, когда была дана подсказка. Кто знает почему?

// $ scope. $ Apply ();

$ scope. $ Digest ();

};

// дайте $ acfope.m0 переменная быть недействительной;

$ scope. $ watch ("m0", function (va) {

$ scope.wat = va;

})

});

</script>

</div>

</body>

</html>

Метод инструмента, который вы определяете себя в угловом

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Список метода инструментов в угловом

</div>

<div>

<ul>

<li role = "presentation"> <a href = "###"> angular.bind </a> </li>

<li role = "presentation"> <a href = "###"> angular.bootstrap </a> </li>

<li rol = "presentation"> <a href = "###"> angular.copy </a> </li>

<li rol = "presentation"> <a href = "###"> angular.element </a> </li>

<li role = "presentation"> <a href = "###"> angular.equals </a> </li>

<li role = "presentation"> <a href = "###"> angular.extend </a> </li>

<li rol = "presentation"> <a href = "###"> angular.foreach </a> </li>

<li rol = "presentation"> <a href = "###"> angular.fromjson </a> </li>

<li rol = "presentation"> <a href = "###"> angular.identity </a> </li>

<li rol = "presentation"> <a href = "###"> angular.injector </a> </li>

<li rol = "presentation"> <a href = "###"> angular.isarray </a> </li>

<li rol = "presentation"> <a href = "###"> angular.isdate </a> </li>

<li rol = "presentation"> <a href = "###"> angular.isdefined </a> </li>

<li rol = "presentation"> <a href = "###"> angular.iselement </a> </li>

<li rol = "presentation"> <a href = "###"> angular.isfunction </a> </li>

<li role = "presentation"> <a href = "###"> angular.isnumber </a> </li>

<li role = "presentation"> <a href = "###"> angular.isobject </a> </li>

<li rol = "presentation"> <a href = "###"> angular.isstring </a> </li>

<li role = "presentation"> <a href = "###"> angular.isundefined </a> </li>

<li role = "presentation"> <a href = "###"> angular.lowercase </a> </li>

<li role = "presentation"> <a href = "###"> angular.module </a> </li>

<li role = "presentation"> <a href = "###"> angular.noop </a> </li>

<li role = "presentation"> <a href = "###"> angular.ReloadWithDebuginfo </a> </li>

<li rol = "presentation"> <a href = "###"> angular.tojson </a> </li>

<li rol = "presentation"> <a href = "###"> angular.Uppercase </a> </li>

</ul>

<div>

Эти инструменты и методы похожи на другие библиотеки;

Angular.Element - это небольшой JQ для элемента выбора ангаарлитов;

<br>

Angular.Module - это метод модульных элементов;

</div>

</body>

</html>

Использование NG-TransClude (это официальный случай), код заключается в следующем:

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Использование NG-TransClude (это официальный случай):

</div>

<div>

</div>

app.directive ('pane', function () {

возвращаться {

ограничить: 'e',

Transclude: True,

Scope: {title: '@'},

Шаблон: '<div style = "border: 1px solid black;">' +

'<div style = "founal-color: grey"> {{title}} </div>' +

'<ng-transclude> </ng-transclude>' +

'</div>'

};

})

.controller ('examplecontroller', ['$ scope', function ($ scope) {

$ scope.title = 'lorem ipsum';

$ scope.text = 'nequ porno quisquam est qui dolorem ipsum quia dolor ...';

}]);

</script>

</div>

</body>

</html>

Вот пример проверки точности почтового ящика:

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

Ngpaste, Ngmouseup, Ngkeyup, Ngmodeloptions и т. Д., См. Официальное использование, просто используйте чек API (официальное потребности FQ;)

</div>

Если вы не используете компонент NG-Message, подсказка ошибки заключается в следующем;

<div>

<метка для = "EmailAddress"> Введите свой адрес электронной почты: </label>

<!-Это слишком сложное->

Вы забыли ввести свой адрес электронной почты ...

</div>

<div ng-if = "! userform.emailaddress. $ error.required &&

userform.emailaddress. $ error.email »>

Вы неправильно ввели свой адрес электронной почты ...

</div>

</form>

<br>

<a href = "https://yearofmoo.github.io/ngmessage/"> демо, написанное иностранцами </a>

</div>

app.controller ("fromVaild", function ($ scope) {

//$SCOPE.MYFIELD.$ERROR = {minLength: true, обязательно: false};

})

</script>

</div>

</body>

</html>

SETTIMEOUT и SETINTERVAL оба обернуты угловатыми и возвращают экземпляр задерживого объекта:

Кода -копия выглядит следующим образом:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

$ тайм -аут и интервал $, эти две услуги;

</div>

<div>

<h4> setInterval </h4>

<p>

$ интервал (FN, задержка, [count], [invokeapply]);

</p>

</a>

<p>

$ timeout (fn, [Delock], [InvokeApply]);

</p>

</a>

</div>

<div>

</div>

<кнопка ng-click = "prog ()">

начинать

</button>

</div>

app.controller ("st", function ($ scope, $ element, $ интервал) {

var $ el = $ ($ element [0]). Найти (".. Progress-bar");

console.log (аргументы);

// Использование элемента, выбранного Angular.Element, чтобы найти что -то без поиска;

$ scope.prog = function () {

var df = $ интервал (function () {

var val = parseint ($ el.html ())+4;

if (val> = 104) $ Interval.cancel (df);

$ el.html (val+"%") .width (val+"%");

}, 100);

Console.log (DF)

//console.log(aa = $ интервал)

};

});

</script>

</div>

</body>

</html>