angularjs Bootstrap
Angularjs preferowany arkusz stylów jest Twitter Bootstrap, Twitter Bootstrap to najpopularniejszy framework front-end.
bootstrap
Możesz dołączyć do Twitter Bootstrap aplikacji angularjs można dodać następujący element kodu w <head>:
<Link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Jeśli na miejscu w kraju, zaleca się używać Baidu repozytorium statyczne bootstrap następujący kod:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
Poniżej znajduje się pełna przykładów HTML przy użyciu angularjs i Bootstrap instrukcji class.
Kod HTML
<! DOCTYPE html>
<Html>
<Link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body ng-app = "myApp " NG-controller = "userCtrl">
<Div class = "container">
<H3> Użytkownicy </ h3>
<Class = "Tabela tabeli Tabeli- paski">
<THEAD> <tr>
<Th> Edytuj </ th>
<Th> Imię </ th >
<Th> Nazwisko </ th >
</ Tr> </ thead>
<Tbody> <tr NG-repeat = "user"> w użytkownikach
<Td>
<Class = Przycisk "btn" ng -Kliknij = "editUser (user.id)">
<Span class = "glyphicon glyphicon- ołówek"> </ span> & nbsp; & nbsp; Edycja
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Class = Przycisk "btn btn- sukcesu" ng-click = "editUser (" nowy ")">
<Span class = "glyphicon glyphicon- user"> </ span> Create New User
</ Button>
<Hr>
<H3 ng-show = "edit "> Utwórz nowego użytkownika: </ h3>
<H3 ng-hide = "edit "> Edit User: </ h3>
<Class Form = "form-horizontal ">
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Imię: </ label>
<Div class = "kol-sm -10">
<Input type = "text" ng -Model = "fname" NG-disabled = "Edit" placeholder = "Imię">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Nazwisko: </ label>
<Div class = "kol-sm -10">
<Input type = "text" ng -Model = "lname" NG-disabled = "Edit" placeholder = "Nazwisko">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Hasło: </ label>
<Div class = "kol-sm -10">
<Wejście type = "password" ng -Model = "passw1" placeholder = "Hasło">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Powtórz: </ label>
<Div class = "kol-sm -10">
<Wejście type = "password" ng -Model = "passw2" placeholder = "Powtórz hasło">
</ Div>
</ Div>
</ Form>
<Hr>
<Class = Przycisk "btn btn- sukcesu" NG-disabled = "Błąd || niekompletne">
<Span class = "glyphicon glyphicon- zapisz"> </ span> Zapisz zmiany
</ Button>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Body>
</ Html>
<Html>
<Link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body ng-app = "myApp " NG-controller = "userCtrl">
<Div class = "container">
<H3> Użytkownicy </ h3>
<Class = "Tabela tabeli Tabeli- paski">
<THEAD> <tr>
<Th> Edytuj </ th>
<Th> Imię </ th >
<Th> Nazwisko </ th >
</ Tr> </ thead>
<Tbody> <tr NG-repeat = "user"> w użytkownikach
<Td>
<Class = Przycisk "btn" ng -Kliknij = "editUser (user.id)">
<Span class = "glyphicon glyphicon- ołówek"> </ span> & nbsp; & nbsp; Edycja
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Class = Przycisk "btn btn- sukcesu" ng-click = "editUser (" nowy ")">
<Span class = "glyphicon glyphicon- user"> </ span> Create New User
</ Button>
<Hr>
<H3 ng-show = "edit "> Utwórz nowego użytkownika: </ h3>
<H3 ng-hide = "edit "> Edit User: </ h3>
<Class Form = "form-horizontal ">
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Imię: </ label>
<Div class = "kol-sm -10">
<Input type = "text" ng -Model = "fname" NG-disabled = "Edit" placeholder = "Imię">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Nazwisko: </ label>
<Div class = "kol-sm -10">
<Input type = "text" ng -Model = "lname" NG-disabled = "Edit" placeholder = "Nazwisko">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Hasło: </ label>
<Div class = "kol-sm -10">
<Wejście type = "password" ng -Model = "passw1" placeholder = "Hasło">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Powtórz: </ label>
<Div class = "kol-sm -10">
<Wejście type = "password" ng -Model = "passw2" placeholder = "Powtórz hasło">
</ Div>
</ Div>
</ Form>
<Hr>
<Class = Przycisk "btn btn- sukcesu" NG-disabled = "Błąd || niekompletne">
<Span class = "glyphicon glyphicon- zapisz"> </ span> Zapisz zmiany
</ Button>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Body>
</ Html>
Spróbuj »
parsowanie poleceń
angularjs dyrektyw | opis |
---|---|
<Html ng-app | Dla <html> definiuje aplikacji (nienazwany) |
<Body ng kontroler | Dla <body> element definiuje kontroler |
<Tr ng-repeat | użytkownicy rowerowe tablicę obiektów, każdy obiekt użytkownika w <tr> elementu. |
<Przycisk ng kliknięciem | Gdy funkcja jest wywoływana editUser kliknij przycisk <> Element kiedy () |
<H3 ng-show | Jeśli edytujesz = true wyświetlania elementu <h3> |
<H3 ng-hide | Jeśli edytujesz = true ukrytych elementu <h3> |
<Wejście ng model | Oprawa <input> element stosowania |
<Przycisk ng niepełnosprawnych | Jeśli wystąpi błąd lub ncomplete = true Wyłącz <button> Element |
Bootstrap klasy analitycznej
element | bootstrap klasy | definicje |
---|---|---|
<Div> | pojemnik | Zawartość pojemnika |
<Table> | stół | stół |
<Table> | Stół paski | Tabela paski tle |
<Button> | btn | przycisk |
<Button> | btn-success | przycisk sukces |
<Span> | glyphicon | szewron |
<Span> | glyphicon-ołówek | ikona ołówka |
<Span> | glyphicon użytkowników | ikona użytkownika |
<Span> | glyphicon-save | Zapisz ikona |
<Form> | form-poziome | poziomy stół |
<Div> | Forma-group | formularz Grupa |
<Label> | kontrolno-label | kontroler Tagi |
<Label> | kol-SM-2 | W ciągu dwóch |
<Div> | kol-SM-10 | Powyżej 10 |
Kod JavaScript
myUsers.js
angular.module ( "myApp", [] ). Regulator ( "userCtrl ', function ($ zakres) {
$ Scope.fName = '';
$ Scope.lName = '';
$ Scope.passw1 = '';
$ Scope.passw2 = '';
$ Scope.users = [
{Id: 1, FName: " Hege" lname: "pege"},
{Id: 2, FName: " Kim", lname: "Pim"},
{Id: 3, FName: " Sal", lname: "Smith"},
{Id: 4, FName: ' Jack', lname: "Jones"},
{Id: 5, FName: " John", lname: "Doe"},
{Id: 6, FName: " Piotr", lname: "Pan"}
];
$ Scope.edit = true;
$ Scope.error = false;
$ Scope.incomplete = false;
$ Scope.editUser = function (id) {
if (id == 'nowa') {
$ Scope.edit = true;
$ Scope.incomplete = true;
$ Scope.fName = '';
$ Scope.lName = '';
} Else {
$ Scope.edit = false;
$ Scope.fName = $ scope.users [id-1] .fName;
$ Scope.lName = $ scope.users [id-1] .lName;
}
};
. $ Zakres $ zegarek ( "passw1 ', function () {$ scope.test ();});
. $ Zakres $ zegarek ( "passw2 ', function () {$ scope.test ();});
. $ Zakres $ zegarek ( "fname ", function () {$ scope.test ();});
. $ Zakres $ zegarek ( "lname ', function () {$ scope.test ();});
$ Scope.test = function () {
if ($ scope.passw1! == $ scope.passw2 ) {
$ Scope.error = true;
} Else {
$ Scope.error = false;
}
$ Scope.incomplete = false;
if ($ scope.edit && (! $ scope.fName.length ||
! $ Scope.lName.length ||
! $ Scope.passw1.length ||! $ Scope.passw2.length)) {
$ Scope.incomplete = true;
}
};
});
$ Scope.fName = '';
$ Scope.lName = '';
$ Scope.passw1 = '';
$ Scope.passw2 = '';
$ Scope.users = [
{Id: 1, FName: " Hege" lname: "pege"},
{Id: 2, FName: " Kim", lname: "Pim"},
{Id: 3, FName: " Sal", lname: "Smith"},
{Id: 4, FName: ' Jack', lname: "Jones"},
{Id: 5, FName: " John", lname: "Doe"},
{Id: 6, FName: " Piotr", lname: "Pan"}
];
$ Scope.edit = true;
$ Scope.error = false;
$ Scope.incomplete = false;
$ Scope.editUser = function (id) {
if (id == 'nowa') {
$ Scope.edit = true;
$ Scope.incomplete = true;
$ Scope.fName = '';
$ Scope.lName = '';
} Else {
$ Scope.edit = false;
$ Scope.fName = $ scope.users [id-1] .fName;
$ Scope.lName = $ scope.users [id-1] .lName;
}
};
. $ Zakres $ zegarek ( "passw1 ', function () {$ scope.test ();});
. $ Zakres $ zegarek ( "passw2 ', function () {$ scope.test ();});
. $ Zakres $ zegarek ( "fname ", function () {$ scope.test ();});
. $ Zakres $ zegarek ( "lname ', function () {$ scope.test ();});
$ Scope.test = function () {
if ($ scope.passw1! == $ scope.passw2 ) {
$ Scope.error = true;
} Else {
$ Scope.error = false;
}
$ Scope.incomplete = false;
if ($ scope.edit && (! $ scope.fName.length ||
! $ Scope.lName.length ||
! $ Scope.passw1.length ||! $ Scope.passw2.length)) {
$ Scope.incomplete = true;
}
};
});
Analiza kodu JavaScript
Właściwości Zakres | stosowanie |
---|---|
$ Scope.fName | zmiennych modelu (nazwa użytkownika) |
$ Scope.lName | zmiennych modelu (nazwa użytkownika) |
$ Scope.passw1 | zmiennych modelu (hasło użytkownika) 1 |
$ Scope.passw2 | zmiennych modelu (hasło użytkownika 2) |
$ Scope.users | zmiennych modelu (tablice użytkowników) |
$ Scope.edit | Jest ustawiona na wartość true, gdy użytkownik kliknie, aby utworzyć użytkownika. |
$ Scope.error | Jeśli passw1 nie równa passw2 ustawiona na true |
$ Scope.incomplete | Jeśli każde pole jest puste (długość = 0) jest ustawiony na true |
$ Scope.editUser | Ustawianie zmiennych modelu |
$ Scope.watch | zmienne modelu monitora |
$ Scope.test | błędy sprawdzania poprawności i kompletności zmiennych modelu |