Eu estava entediado em casa e encontrei um tutorial sobre o Angular Online. Aprendi os dois módulos de angular, ui-router e ng-grid, e o imitei e fiz uma coisa pequena.
O código foi enviado para o Github e o endereço está aqui https://github.com/wwervin72/angular.
Amigos interessados podem dar uma olhada. Então aqui primeiro entendemos o uso desses dois módulos.
Vamos primeiro falar sobre o módulo da interface do usuário, que é usado principalmente para implementar o roteamento de nível profundo. De fato, o Angular possui uma instrução interna ng-rotina. Se não houver problema de nidificação no projeto, é bastante conveniente usar esta instrução para obter saltos entre as páginas, mas suas deficiências são que ela não tem como usar rotas profundas aninhadas. Então, primeiro, se queremos usar este módulo, precisamos fazer o download.
O endereço de download está aqui http://www.bootcdn.cn/angular-ui-ruter/.
Após o download, podemos importá -lo para o nosso projeto. Observe aqui que, como esse modular é baseado no Angular, precisamos importar o arquivo JS angular antes disso. Isso pode ser baixado no site oficial da Angular.
Depois que todos os preparativos acima forem concluídos, podemos escrever nosso código escrito à mão.
Parte html
<div> <div ui-view> </div> </div>
Aqui está uma coisa para observar que os atributos adicionados na DIV não são mais NG-View, mas Ui-View.
JS parte
var app = angular.module ('app', ['ui.router', 'loginmodel', 'listmodel'])); app.config (function ($ stateprovider, $ urlouterterProvider) {$ urlRouterProvider.otherwise ('/index'); $ estatal) {$ URLROUTER. 'tpls/start.html'}) .state ('registring', {url: '/register', templateurl: 'tpls/register.html'}) .state ('main', {url: '/main {positype: [0,9] {1,5}},, views: {positionPe: [0,9] {1,5}}, 'tpls/main.html'}, 'typElist@main': {templateurl: 'tpls/typeList.html'}, 'tbhero@main': {templateurl: 'tpls/tbhero.html':}}}) .STERO ',' addrhero ', {}}}}). 'tpls/addhero.html'}) .State ('find', {url: '/findpwd', templateurl: 'tpls/findpwd.html'}) .state ('detalhe', {url: '/detalhe/iD', modelurl: 'tpls/detalhe'.Existem três lugares para prestar atenção:
1. Ao nidificar, a camada mais externa minha é a parte principal e, em seguida, a lista de digitação e as partes do tbhero são aninhadas dentro. Precisamos prestar atenção ao método de escrita aqui.
2. Quando precisamos abrir conteúdos diferentes de acordo com a opção, precisamos passar os parâmetros para a próxima página. Aqui está a parte do detalhe, e também precisamos prestar mais atenção ao método de escrita aqui.
3. Quando usamos o Module Angular. para criar um aplicativo de aplicativo, precisamos importar o módulo UI.Router nele e alguns módulos que criamos também precisamos importá -los aqui.
4. Usamos o $ StateProvider para configurar rotas, não $ RouteProvider, e o estado usado aqui em vez de quando.
Após a configuração do roteamento, o restante é escrever o código para cada parte do TPLS. Não vou apresentar muito aqui. O mais importante aqui é a configuração de roteamento.
Ok, vamos dar uma olhada no uso da ng-grid. Aqui está o endereço de download http://www.bootcdn.cn/ng-trid/.
Parte html
Parte principal
<div> <div ui-view = "typelist"> </div> <div ui-view = "tbhero"> </div> </div>
Parte da lista de digitação
<div> <div> <div> <a href = "javascript: void (0);"> Tipo de posicionamento do herói </a> ui-sref = "main ({positionType: 2})"> pista do meio </a> <a ui-sref = "main ({posicionalype: 3})"> pista superior </a> <a ui-sref = "main ({positionType: 4})"> jungler </a> ui-sref = "main ({positionType: 5})"> assistente </a> </div> </div> </div>parte da parte
<Div ng-CONTROLLER = "LISTCTRL"> <div> <div> <botão ui-sref = "addHero ()"> adicione herói </botão> <button ui-sref = "index ()"> exit </butt> </div> </form> </div> </div> <div> <div> <div ng-grid = "GridOptions"> </div> </div> </div> </div> </div> </div>
JS parte
var listModel = angular.module('listModel',['ngGrid']);listModel.controller('listCtrl',['$scope','$http','$state','$stateParams', function ($scope, $http, $state, $stateParams) { $scope.pagingOptions = { pageSizes: [5,15,20], PageSize: 5, CurrentPage: 1}; SearchText.TolowerCase (); I+1; $ http.get ('data/heró.php? param ='+$ stateparams.positionType) .success (function (data) {data.foreach (function (item, i) {item.index = i+1;}); $ scope.TotalSeritems = Data.Length; }). Erro (função (dados) {alerta ('Erro de solicitação ...');})}}}, 100); $ scope.getdates ($ scope.pagingOptions.pagesize, $ scope.pagingOptions.currentpage); }, true); ColumnDefs: [{Field: 'Index', // Aqui está o nome do atributo na largura dos dados: 80, exibição: 'Número da sequência', // Aqui está o nome de cada coluna na tabela Pinnable: true, classable: true // é possível classificar:}, {field: 'Name', DisplayName: 'Nome', W -wind. displayName: 'alias', displayName: 'alias', displayName: 'alias', displayName: 'alias', width: 60, sortable: true, pinnable: true }, { field:'position', displayName: 'position', width: 70, sortable: true, pinnable: true }, { field:'equip', displayName: 'equip', width: 500, sortable: true, pinnable: true }, { field:'id', displayName: 'detail strategy', sortable: false, pinnable: true, cellTemplate:'<div><a ui-sref="detail({id:row.getProperty(col.field)})" id="{{row.getProperty(col.field)}}">Details</a></div>' } ], enablePaging: Verdadeiro, // você pode girar o showfooter da página: true, // você exibe o final da tabela TotalServeriTems: 'TotalServeriTems', // Número total de pagingOptions de dados: $ scope.PagingOptions, // Página FilterOptions: $ Scope.FilterOptions // Filtro de dados Parte}])O mais importante aqui é $ SCOPE.GRIDOPTIONS. Ao mesmo tempo, precisamos prestar mais atenção ao método de escrita dos parâmetros no último guia detalhado.
Aqui estão algumas renderizações:
Aqui estão algumas renderizações:
Além disso, não apresentarei o conteúdo da verificação angular da forma, serviço, assistente, PHP, etc. aqui. Se houver algo errado com a escrita, deixarei uma mensagem para informá -lo, obrigado ^_ ^.
A breve análise acima dos módulos de ui-router e ng-grid no AngularJS é todo o conteúdo que compartilhei com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.